logo标签列表

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

htmlcss
4

我正在尝试使具有类.column的4列占据页面高度的100％，但是无法做到，并且我不知道原因。

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'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>

我是一名初学者，关于良好的网页开发实践方面的建议对我来说非常宝贵，因此如果有什么我做得不好的地方，请告诉我。

7个回答
3
将以下CSS添加到您希望高度为页面高度100％的每个div中：
 height: 100vh;

例子：
<div class="column" id="html" style="height: 100vh;">
This column needs to be 100% of the page's height
</div>
非常感谢，它确实有效，但现在有一个小问题，它使div占据了页面高度的100％+ 40或45像素，并且现在我必须滚动才能到达页面底部，有没有办法可以不滚动就解决这个问题？ - Adi
你可以将每个div（列）的高度改为95vh，而将标题的高度改为5vh，而不是40px。 - Ayan
2

百分比相对于父元素，列的父元素为 .header，高度为40像素。因此，您的列高度为40像素。

您要解决的问题有些困难，但是您可以做到。

.column {
  height: 100vh;
}

看看这是否有帮助

在这里阅读有关 vh 的内容https://developer.mozilla.org/en/docs/Web/CSS/length

0

在评论后编辑答案（问题中的HTML结构有误）

您可能希望将整体高度限制为100％，因此请在.column上使用height: calc(100% - 40px);，如以下代码片段所示：

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>

是的，但这会使我的页眉元素占据整个页面，而我并不真正想要这个。 - Adi
但是你的 .column DIV - 你希望它们占据整个页面高度 - 是在 #header 元素内部。这可能是 HTML 写错了，或者你的 header 需要有 100% 的高度，因为它的子元素都有这个高度。 (?) - Johannes
好的 - 在你的评论后，我又改变了我的答案。但是我只是将列移出了标题。现在它应该按照你的意图工作。 - Johannes
0

您可以使用HEIGHT calc Tricks来获取列类的高度。对于此计算，您需要在清除div之前和菜单关闭div之后关闭标题div。然后，您只需编写列高度，例如 height: calc(100% - 40px)。40px是您的标题高度。 其他建议：删除您为菜单设置的宽度和高度。这样，您将在小屏幕上获得更好的视图。此外，您不需要使用column top:0 left:0;，您可以在使用position元素时使用它。如果您有任何问题，请在评论中问我

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'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>

非常感谢您的回答，它对我帮助很大！但是当我按照您的建议去做时，发生了一些非常有趣的事情，在Atom的HTML预览中它完美运行，但是当我用Chrome打开时没有任何变化。（我已经保存了文件）但是当我尝试使用calc（100vh - 40px）时，它真的很有趣。 - Adi
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>

0

你可以使用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'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>

希望这能帮到你！

这对我的情况最有效，几乎完美，但只有一个问题： 在代码片段中看起来很好，但在实际页面中，div仅停留在距页面末端约5px的位置，有任何想法为什么会这样？ 如何附加图像以更好地解释？ - Adi
@Adi 如果你能将它托管在服务器上并给我链接，那就太好了。这样的话我可以更好地帮助你。 - Saurav Rastogi
here.png - Adi
抱歉使用这个广告满载的图片分享服务器，这是我能找到最快的一个，您有更好的建议吗？ - Adi
@Adi 计算您的标题栏的 height，然后使用 #header 的高度值从 100vh 中减去它。就像在我的情况下，标题栏的高度是 45px，所以我这样做：.column-holder { height: calc(100vh - 45px); }。希望您明白了。 - Saurav Rastogi
-1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接