<div>不占据页面的整个高度

时间：2016-12-11 16:35:39

标签： html css

我正在尝试将班级.column的4个列设置为页面高度的100％，但不能这样做，我不知道为什么。

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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's height
  </div>
  <div class="column" id="css">
    This column needs to be 100% of the page's height
  </div>
  <div class="column" id="javascript">
    This column needs to be 100% of the page's height
  </div>
  <div class="column" id="output">
    This column needs to be 100% of the page's height
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

我是一名初学者，对于良好的网络开发实践的每一条建议都对我非常有价值，所以如果我能做得更好，请告诉我。

7 个答案:

答案 0 :(得分：3)

将以下CSS添加到每个div中，您希望其高度为页面高度的100％：

 height: 100vh;

示例：

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

答案 1 :(得分：2)

百分比与父母相关，列的父级为.column { height: 100vh; } ，其高度为40px 这就是为什么你的列高度为40px

你正在解决的问题有点困难，但你可以这样做

digits

看看这有助于你

在这里阅读 vh https://developer.mozilla.org/en/docs/Web/CSS/length

答案 2 :(得分：0)

您可以使用 CSS Flexbox 。您还需要稍微更改HTML结构。

将所有4列包裹在父div中（在我的情况下，它被命名为.column-holder）并使用CSS calc()函数给它一个高度。像：

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

查看下面的工作代码段（使用全屏模式）：

＆＃13;
＆＃13; 
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);
}
＆＃13; 
<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's height
		</div>
		<div class="column" id="css">
			This column needs to be 100% of the page's height
		</div>
		<div class="column" id="javascript">
			This column needs to be 100% of the page's height
		</div>
		<div class="column" id="output">
			This column needs to be 100% of the page's height
		</div>
	</div>

</body>

</html>
＆＃13;
＆＃13;
＆＃13;

希望这有帮助！

答案 3 :(得分：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's height
  </div>
  <div class="column" id="css">
    This column needs to be 100% of the page's heigh
  </div>
  <div class="column" id="javascript">
    This column needs to be 100% of the page's height
  </div>
  <div class="column" id="output">
    This column needs to be 100% of the page's height
</div>

答案 4 :(得分：0)

评论后的编辑答案（有问题的html结构错误）

您可能希望将整体高度限制为100％，因此请在height: calc(100% - 40px);上使用.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's height
  </div>
  <div class="column" id="css">
    This column needs to be 100% of the page's height
  </div>
  <div class="column" id="javascript">
    This column needs to be 100% of the page's height
  </div>
  <div class="column" id="output">
    This column needs to be 100% of the page's height
  </div>

答案 5 :(得分：0)

您可以使用HEIGHT calc Tricks获取列类的高度。对于此计算，您需要标题高度并关闭清除div之前和菜单关闭div之后的标题div。然后你只需要写出像这个高度的列高度：calc（100％ - 40px）。 40px是你的标题高度。 其他建议：删除您为菜单设置的宽度和高度。因此，您将在小屏幕上获得更好的视图。你也不需要列顶：0左：0;你可以在使用position元素时使用它。如果您有任何问题，请在评论中询问我

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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's height
  </div>
  <div class="column" id="css">
    This column needs to be 100% of the page's height
  </div>
  <div class="column" id="javascript">
    This column needs to be 100% of the page's height
  </div>
  <div class="column" id="output">
    This column needs to be 100% of the page's height
  </div>
＆＃13;
＆＃13;
＆＃13;

答案 6 :(得分：-1)

您可以使用flex-layout并使用min-height属性实现此目的。有关flex布局的更多信息，请阅读 - ＆gt; 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

相关问题
最新问题