All geek questions in one place

<div> does not take full page height

I am trying to make 4 columns with a class .columnequal to 100% of the page height, but I cannot do this, and I have no idea why.

body,
html {
  margin: 0px;
  padding: 0px;
  font-family: Helvetica, sans-serif;
  height: 100%;
  width: 100%;
}
#header {
  height: 40px;
  width: 100%;
  background-color: grey;
  display: block;
}
#logo {
  float: left;
  font-size: 30px;
  font-weight: bold;
  padding-left: 15;
  padding-top: 3px;
  margin: 0 auto;
  width: 10%;
}
#menu {
  margin: 0 auto;
  width: 50%;
  height: 50%;
  padding: 10px;
  text-align: center;
}
#menu li {
  display: inline;
  border: 1px solid black;
  border-radius: 15%;
  background-color: red;
  color: white;
}
#menu a {
  text-decoration: none;
  padding: 0 10px;
  /* variable width */
}
a:hover {
  background-color: black;
}
a:link,
a:visited,
a:active {
  color: white;
}
.column {
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 25%;
  height: 100%;
  float: left;
  -webkit-box-shadow: inset 0px 0px 0px 1px black;
  -moz-box-shadow: inset 0px 0px 0px 1px black;
  box-shadow: inset 0px 0px 0px 1px black;
}
.clear-div {
  clear: both;
}
<div id="header">

  <div id="logo">
    CodePlayer
  </div>

  <div id="menu">
    <li><a href="#">HTML</a>
    </li>
    <li><a href="#">CSS</a>
    </li>
    <li><a href="#">JAVASCRIPT</a>
    </li>
    <li><a href="#">OUTPUT</a>
    </li>
  </div>

  <div class="clear-div">

  </div>

  <div class="column" id="html">
    This column needs to be 100% of the page height
  </div>
  <div class="column" id="css">
    This column needs to be 100% of the page height
  </div>
  <div class="column" id="javascript">
    This column needs to be 100% of the page height
  </div>
  <div class="column" id="output">
    This column needs to be 100% of the page height
  </div>
</div>
Run code

I am starting, and every tip about good website development techniques will be very valuable to me, so if there is anything that I could do better, let me know.

+4
source share
7 answers

Add the following CSS to each of your divs for which you want the height to be 100% of the page height:

 height: 100vh;

Example:

<div class="column" id="html" style="height: 100vh;">
This column needs to be 100% of the page height
</div>
+3
source

percentages refer to parents, and the parent column - .headerwhich have a height of 40 pixels, which is why you have a height of 40px for the column

, , ,

.column {
  height: 100vh;
}

,

vh https://developer.mozilla.org/en/docs/Web/CSS/length

+2

CSS Flexbox. HTML.

4 div ( .column-holder) CSS calc(). :

.column-holder {
  display: flex;
  height: calc(100vh - 45px); /* Total Viewport Height - Header Height */
}

( ):

body, html {
  margin: 0px;
  padding: 0px;
  font-family: Helvetica, sans-serif;
  height: 100%;
  width: 100%;
}
#header {
    height: 45px;
    width: 100%;
    background-color: grey;
    display: block;
}
#logo {
  float:left;
  font-size: 30px;
  font-weight: bold;
  padding-left: 15;
  padding-top: 3px;
  margin: 0 auto;
  width: 10%;
}
#menu {
  margin: 0 auto;
  width: 50%;
  padding: 10px;
  text-align:center;
}
#menu li {
  display:inline;
  border: 1px solid black;
  border-radius: 15%;
  background-color: red;
  color: white;
}
#menu a {
  text-decoration:none;
  padding:0 10px; /* variable width */
}
a:hover {
background-color: black;
}
a:link, a:visited, a:active {
  color: white;
}
.column {
  top: 0;
  left:0;
  margin: 0;
  padding: 0;
  width: 25%;
  height: 100%;
  float: left;
  -webkit-box-shadow:inset 0px 0px 0px 1px black;
  -moz-box-shadow:inset 0px 0px 0px 1px black;
  box-shadow:inset 0px 0px 0px 1px black;
}

.clear-div {
  clear:both;
}

.column-holder {
  display: flex;
  height: calc(100vh - 45px);
}
<html>

<head>

	<title>CodePlayer</title>

	<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

	<div id="header">

		<div id="logo">
			CodePlayer
		</div>

		<div id="menu">
			<li><a href="#">HTML</a></li>
			<li><a href="#">CSS</a></li>
			<li><a href="#">JAVASCRIPT</a></li>
			<li><a href="#">OUTPUT</a></li>
		</div>

		<div class="clear-div"></div>
	</div>

	<div class="column-holder">
		<div class="column" id="html">
			This column needs to be 100% of the page height
		</div>
		<div class="column" id="css">
			This column needs to be 100% of the page height
		</div>
		<div class="column" id="javascript">
			This column needs to be 100% of the page height
		</div>
		<div class="column" id="output">
			This column needs to be 100% of the page height
		</div>
	</div>

</body>

</html>

, !

0

HTML . , , , height:40px;

body,
html {
  margin: 0px;
  padding: 0px;
  font-family: Helvetica, sans-serif;
  height: 100%;
  width: 100%;
}
#header {
  height: 40px;
  width: 100%;
  background-color: grey;
  display: block;
}
#logo {
  float: left;
  font-size: 30px;
  font-weight: bold;
  padding-left: 15;
  padding-top: 3px;
  margin: 0 auto;
  width: 10%;
}
#menu {
  margin: 0 auto;
  width: 50%;
  height: 50%;
  padding: 10px;
  text-align: center;
}
#menu li {
  display: inline;
  border: 1px solid black;
  border-radius: 15%;
  background-color: red;
  color: white;
}
#menu a {
  text-decoration: none;
  padding: 0 10px;
  /* variable width */
}
a:hover {
  background-color: black;
}
a:link,
a:visited,
a:active {
  color: white;
}
.column {
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 25%;
  height: 100%;
  float: left;
  -webkit-box-shadow: inset 0px 0px 0px 1px black;
  -moz-box-shadow: inset 0px 0px 0px 1px black;
  box-shadow: inset 0px 0px 0px 1px black;
}
.clear-div {
  clear: both;
}
<div id="header">

  <div id="logo">
    CodePlayer
  </div>

  <div id="menu">
    <li><a href="#">HTML</a>
    </li>
    <li><a href="#">CSS</a>
    </li>
    <li><a href="#">JAVASCRIPT</a>
    </li>
    <li><a href="#">OUTPUT</a>
    </li>
  </div>
  </div>
  <div class="clear-div">

  </div>

  <div class="column" id="html">
    This column needs to be 100% of the page height
  </div>
  <div class="column" id="css">
    This column needs to be 100% of the page heigh
  </div>
  <div class="column" id="javascript">
    This column needs to be 100% of the page height
  </div>
  <div class="column" id="output">
    This column needs to be 100% of the page height
</div>
0

( html )

, 100%, height: calc(100% - 40px); on .column, :

body,
html {
  margin: 0px;
  padding: 0px;
  font-family: Helvetica, sans-serif;
  height: 100%;
  width: 100%;
}
#header {
  height: 40px;
  width: 100%;
  height: 40px;
  background-color: grey;
  display: block;
}
#logo {
  float: left;
  font-size: 30px;
  font-weight: bold;
  padding-left: 15;
  padding-top: 3px;
  margin: 0 auto;
  width: 10%;
}
#menu {
  margin: 0 auto;
  width: 50%;
  padding: 10px;
  text-align: center;
}
#menu li {
  display: inline;
  border: 1px solid black;
  border-radius: 15%;
  background-color: red;
  color: white;
}
#menu a {
  text-decoration: none;
  padding: 0 10px;
  /* variable width */
}
a:hover {
  background-color: black;
}
a:link,
a:visited,
a:active {
  color: white;
}
.column {
  margin: 0;
  padding: 0;
  width: 25%;
  height: calc(100% - 40px);
  float: left;
  -webkit-box-shadow: inset 0px 0px 0px 1px black;
  -moz-box-shadow: inset 0px 0px 0px 1px black;
  box-shadow: inset 0px 0px 0px 1px black;
}
.clear-div {
  clear: both;
}
<div id="header">

  <div id="logo">
    CodePlayer
  </div>

  <div id="menu">
    <li><a href="#">HTML</a>
    </li>
    <li><a href="#">CSS</a>
    </li>
    <li><a href="#">JAVASCRIPT</a>
    </li>
    <li><a href="#">OUTPUT</a>
    </li>
  </div>

  <div class="clear-div">

  </div>
</div>
  <div class="column" id="html">
    This column needs to be 100% of the page height
  </div>
  <div class="column" id="css">
    This column needs to be 100% of the page height
  </div>
  <div class="column" id="javascript">
    This column needs to be 100% of the page height
  </div>
  <div class="column" id="output">
    This column needs to be 100% of the page height
  </div>
0

HEIGHT calc Tricks, . div div div. - : calc (100% - 40px). 40px - . : , . , . : 0 left: 0; , . - ,

body,
html {
  margin: 0px;
  padding: 0px;
  font-family: Helvetica, sans-serif;
  height: 100%;
  width: 100%;
}
#header {
  height: 40px;
  width: 100%;
  background-color: grey;
  display: block;
}
#logo {
  float: left;
  font-size: 30px;
  font-weight: bold;
  padding-left: 15;
  padding-top: 3px;
  margin: 0 auto;
  width: 10%;
}
#menu {
  margin: 0 auto;
  

  padding: 10px;
  text-align: center;
}
#menu li {
  display: inline;
  border: 1px solid black;
  border-radius: 15%;
  background-color: red;
  color: white;
}
#menu a {
  text-decoration: none;
  padding: 0 10px;
  /* variable width */
}
a:hover {
  background-color: black;
}
a:link,
a:visited,
a:active {
  color: white;
}
.column {

  margin: 0;
  padding: 0;
  width: 25%;
  height: calc(100% - 40px);
  float:left;
  -webkit-box-shadow: inset 0px 0px 0px 1px black;
  -moz-box-shadow: inset 0px 0px 0px 1px black;
  box-shadow: inset 0px 0px 0px 1px black;
}
.clear-div {
  clear: both;
}
<div id="header" class="clear-div">

  <div id="logo">
    CodePlayer
  </div>

  <div id="menu">
    <li><a href="#">HTML</a>
    </li>
    <li><a href="#">CSS</a>
    </li>
    <li><a href="#">JAVASCRIPT</a>
    </li>
    <li><a href="#">OUTPUT</a>
    </li>
  </div>
 </div>
   
<div class="clear-div"></div>
  <div class="column" id="html">
    This column needs to be 100% of the page height
  </div>
  <div class="column" id="css">
    This column needs to be 100% of the page height
  </div>
  <div class="column" id="javascript">
    This column needs to be 100% of the page height
  </div>
  <div class="column" id="output">
    This column needs to be 100% of the page height
  </div>
0

You can use flex-layoutand achieve this with a property min-height. For more information on flexible layout read this -> https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.fill-height-or-more {
  min-height: 100%;
  display: flex;
  flex-direction: row;
  > div {
    border-style: solid; 
    display: flex;
    flex-direction: column;
  }
}

http://codepen.io/anon/pen/OboJdP

-1
source

Source: https://habr.com/ru/post/1663455/

More articles:


All Articles