Как растянуть сайт на весь экран?

Question

Ека @mephkat

хочу верстать!

Как растянуть сайт на весь экран?

Привет! Нужно растянуть табличку по высоте на весь экран, но как-то ничего не выходит :(
css прилагаю.

body, html {
    height:100%;
    min-height:100%;
}

.wrapper {
  display: flex;
  flex-direction: column;
}

.content-wrapper {
  display: flex;
  flex-wrap: nowrap;
}

.head {
  background-color: #D2691E;
  text-align: center;
  margin: 3px;
}

.navigation {
  align-self: flex-start;
  margin: 3px;
  background-color: lightgreen;
  width: 200px;
  text-align: center;
  height: 500px;
}

.content {
  background-color: #9df5d7;
  margin: 3px;
}

.info {
  background-color: lightBlue;
  margin: 3px;
}

.footer {
  background-color: #D2691E;
  text-align: center;
  margin: 3px;
  height: 50px;
}

Выглядит все это дело так:

Всем заранее большое спасибо :з

Вопрос задан более трёх лет назад
5100 просмотров

3 комментария

Подписаться 1 Простой 3 комментария

mayil @mayil

HTML приложи и проблема в том что ты наверное указал явную высоту как он может растянуться на весь экран?

Написано более трёх лет назад

Ека @mephkat Автор вопроса

*указала. я девочка :D

высота указана для блока с навигацией только, для всего остального нет. но я пробовала ее убирать и чуда не произошло, к сожалению

html -

<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>HTML5 Semantics and Flexbox</title>
  <link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="wrapper">
  <div class="head"><h1>HTML5 Semantics and Flexbox</h1>
  </div>
  <div class="content-wrapper">
  <div class="navigation">
    <p><h3>Navigate</h2></p>
    <p>Home</p>
<p><a href="#">Link 1</a></p>
<p><a href="#">Link 2</a></p>
  </div>
  <div class="content">
    <h1>About This Page</h1>
    <p>On this page, I am experimenting with HTML5 semantics and CSS flexbox for a tidy layout.</p>
    <p>On JS Bin, I purposedly includes the stylesheet on the HTML tab (instead of separate CSS tab) for easier code reading for those with small screen.</p>
    <p>The main element is placed within a div element along with nav and aside. I don't know if this is right or wrong (let me know?).</p>
    <p>Navigation links are placed within nav, laid on the left. The main is at the center column (this column). Within it is the main topic (this article).</p>
    <p>The aside element is at the rightmost of the column, I put supplemental information on it.</p>

    <p><h1>Test This Page!</h1></p>
    <p>Do test this page by:</p>

    <li>Resizing the browser windows; see if flexbox lives up to its reputation.</li>
    <li>Run HTML Outliner or HeadingsMap (or similar tool) and see if the outline is good.</li>
    <li>Check the markup in this page with W3C Markup validator; see if the markups are good. Paste the URL of this page to the address column. <a href="#">Click here to try!</a>.</li>
    <li>Check the CSS part of this page too! <a href="#">Click here!</a></li>
  </div>
  <div class="info">
    <h1><p>HTML</p></h1>
<p>Stands for HyperText Markup Language. The current standard is HTML5.
</p>
<h1><p>CSS</p></h1>
<p>Stands for Cascaded Style Sheet. The current standard is CSS3.
</p>
<p><h1>URL</h1></p>
<p>Short for Uniform Resource Locator. It is a reference (an address) to a resource on the Internet.
</p>
  </div>
</div>
  <div class="footer">
Nov, 2015 @ royray
  </div>
</div>
</body>
</html>

Написано более трёх лет назад