页面高度到视口的 100%？答案

【问题标题】：Page height to 100% of viewport?页面高度到视口的 100%？
【发布时间】：2013-11-10 17:27:51
【问题描述】：

首先我要说的是，我对整个网络开发非常陌生，这是我的第一个响应式网站，所以请保持温和并牢记这一点，我是这个词 noob 的定义阶段。搜索了一段时间的答案但没有运气，我希望这里有人可以帮助我。

我正在尝试为这个网站创建一个主页。该设计只是页面左侧的一个块，在顶部显示徽标，然后在下方显示一系列链接，所有这些都位于相同的背景上。右侧是一张大图像，它填满了屏幕的其余部分。我希望整个页面填充任何设备的浏览器窗口，因此绝对不需要滚动，即宽度和高度都是视口的 100%。页面的宽度完全没有让我感到悲伤，根据我的需要巧妙地调整到不同的屏幕尺寸，侧边栏为 20% 宽度，主图像为 80%。

然而，身高是另一回事。到目前为止，在我尝试过的任何 CSS 组合中，我似乎都无法让高度在视口的 100% 处表现。侧边栏太短，主图像太长，或者两者都太长等等。我想保持纵横比的主图像，只是让它溢出它的 div 以保持大部分显示和侧面bar 我只想适应 100% 的页面高度。这是我目前的代码：

<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
html
{
height: 100%;
margin: 0;
padding: 0;
}

body
{
height: 100%;
margin: 0;
padding: 0;
}

#page 
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

#sidebar
{
float: left;
width: 20%;
height: 100%;
padding-bottom: 10;
margin: 0;
background: url(/Images/bg.jpg);
}

#slideshow
{
float: right;
width: 80%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}

#logoimg
{
width: 80%;
margin-top: 10%;
margin-left: 10%;
margin-right: 10%;
}

#mainimg
{
width: 100%;
overflow: hidden;
}

.link
{
font-family: courier;
font-size: 1.3em;
text-align: center;
padding-top: 7%;
padding-bottom: 1%;
color: rgba(255,255,255,1.00); 
}

@font-face
{
font-family: courier;
src: url(/courier_new-webfont.ttf);
src: url(/courier_new-webfont.eot);
src: url(/courier_new-webfont.woff);
}

</style>
</head>

<body>
<div id="page"><!--Whole page container-->
<div id="sidebar"><!--Side bar container-->
    <div class="link" id="logo"><img id="logoimg" src="/Images/logo.png"></div>
    <div class="link" id="homelink">Home<!--Home link--></div>
    <div class="link" id="aboutlink">About<!--About link--></div>
    <div class="link" id="gallerylink">Gallery<!--Gallery link--></div>
    <div class="link" id="priceslink">Prices<!--Prices link--></div>
    <div class="link" id="reviewslink">Reviews<!--Reviews link--></div>
    <div class="link" id="contactlink">Contact<!--Contact link--></div>
    <div class="link" id="clientslink">Clients<!--Clients link--></div>
</div>
<div id="slideshow"><img id="mainimg" src="/Images/main.jpg"><!--Image slideshow container-->
</div>
</div>
</body>
</html>

对此的任何帮助将不胜感激，并毫不犹豫地指出任何严重的业余错误。我愿意接受任何批评并从中学习。谢谢

【问题讨论】：

我可以建议的第一件事是删除该样式标签并将css传输到它自己的页面。如果您要将媒体查询和所有内容带入此等式，那么您需要一个单独的 css 页面。
那么对于包括垂直视口在内的所有全高断点，推荐的 scrset 大小是多少？我知道 1600x900，但我在垂直方面遇到问题

标签： html css height

【解决方案1】：

这只是 HTML 的简化代码示例：

<div id="welcome">
    your content on screen 1
</div>
<div id="projects">
    your content on screen 2
</div>

这是使用 vh 的 CSS：

div#welcome {
    height: 100vh;
    background: black;
}

div#projects {
    height: 100vh;
    background: yellow;
}

从这里：http://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/

它对我有用。

【讨论】：

【解决方案2】：

我已经为你做了一个基本的设置来展示你将如何设计它。我发现将高度设置为 100% 的最佳方法是使用 jQuery/Javascript。您可以找到窗口的高度，然后使用它将其输入到 css 中。

其工作方式是var wH = $(window).height(); 查找高度并将其转换为数字。然后当您使用$('.sideBar').css({height: wH}); 时，您将高度输入到sideBar 的css 中。

jQuery

function windowH() {
   var wH = $(window).height();

   $('.sideBar, .mainImg').css({height: wH});
}

windowH();

我写的这个函数是给这两个元素窗口的高度。这将允许这两个元素成为任何浏览器窗口的 100%。

我还建议将 nav 转换为 ul，我将其包含在小提琴中以展示这是如何实现的。

JSFIDDLE（去掉url末尾的'show'查看代码）

接下来您需要研究的是media queries，以调整内容以更好地适应移动设备。考虑在移动设备上将侧边栏更改为水平导航。

如果你想要一个纯 CSS 唯一的方法，那么你可以做这样的事情，

html, body {
   height: 100%;
   width: 100%;
   margin: 0;
   padding: 0;
}

通过在html/body 中将高度和宽度添加到 100%，您可以在其他元素上使用 height: 100% 来填充整个页面。

请参阅此JSFIDDLE 以了解其工作原理。

Helpful read about responsive web design

【讨论】：

没问题！我从来没有做过这样的布局，所以我认为这对我们双方都有好处。您也可以像这样设置高度：var wH = $(window).height()/2; 这将是高度的 1/2，var wH = $(window).height()/4; 这将是高度的 1/4。如果此答案对您有所帮助，请不要忘记将其标记为正确答案。祝您的设计好运，如有任何问题，请随时问我！
如果元素的容器具有不同的高度（高于浏览器视口），则“纯 CSS”答案仅适用于 body 的直接后代，而不是将该元素的 height 设置为 100%将使其高于视口。最好的“纯 CSS”方法是使用vh，就像下面@Arshen 的回答一样。

【解决方案3】：

在 Chrome 上，只需在 body 上添加 display: flex 就足够了。

在 Firefox 上，您必须添加 height: 100vh 才能获得所需的结果。 margin: 0 将摆脱烦人的滚动条。

<body style="display:flex; height: 100vh; margin: 0;">
  <div style="background-color: red; flex:1;"></div>
  <div style="background-color: green; flex:2;"></div>
  <div style="background-color: blue; flex:1;"></div>
</body>

【讨论】：

【解决方案4】：

精确覆盖页面高度的示例代码。

HTML

<div class="container">  
  <div class="header">
    <h1>Header</h1>
  </div>
  <div class="content">
    Main content
  </div>
</div>

CSS

html, body {
 height: 100%;
 width: 100%;
 margin: 0;
 padding: 0;
}
.container {
 max-width: 1020px;
 margin: auto;
 height: 100%;
 background: #ddd;
 padding:16px;
 box-sizing:border-box
}
.header,.content{
 background:#fff;
 padding:16px
}
.content{
 margin-top:16px;
 min-height:calc(100% - 160px);
}

示例链接： https://codepen.io/rahdirs/pen/jeRVod

【讨论】：