Html 页面高度为 100% 的视口？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19694130/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Page height to 100% of viewport?
提问by Dan
I'll start by saying that I am very very new to web development as a whole and that this is my very first responsive site so please be gentle and bear this in mind, I am the definition of the word noob at this stage. Having searched for an answer for a while and having no luck I'm hoping that someone here could help me out.
我首先要说的是，我对整个 Web 开发非常陌生，这是我的第一个响应式网站，所以请保持温和并记住这一点，我是现阶段 noob 一词的定义。搜索了一段时间的答案并且没有运气，我希望这里有人可以帮助我。
I'm trying to make a homepage for this website. The design is simply a block down the left hand side of the page showing the logo at the top and then a series of links underneath, all of which is on the same background. To the right of this is one big image which fills the rest of the screen. I want the whole page to fill the browser window of whatever device it is viewed on so absolutely no scrolling is necessary, i.e. width and height both 100% of the viewport. The width of the page is giving me no grief at all, sweetly adjusting to different screen sizes as I want it, with the sidebar at 20% of the width and the main image at 80%.
我正在尝试为这个网站制作一个主页。该设计只是页面左侧的一个块，在顶部显示徽标，然后在下方显示一系列链接，所有这些都在同一背景上。在它的右边是一个大图像，它填满了屏幕的其余部分。我希望整个页面填满在任何设备上查看它的浏览器窗口，因此绝对不需要滚动，即宽度和高度均为视口的 100%。页面的宽度一点也不让我感到悲伤，可以根据需要巧妙地调整到不同的屏幕尺寸，侧边栏为宽度的 20%，主图像为 80%。
The height is a different story however. I can't seem, in any combination of CSS I've tried so far, to be able to get the height to behave at 100% of the viewport. Either the sidebar is too short and the main image is too long or both are too long etc etc. The main image I want to keep the aspect ratio of and just have it overflow it's div as required to keep most of it displayed and the side bar I just want to fit to 100% of the page height. Here is my code at present:
然而，高度是一个不同的故事。到目前为止，在我尝试过的任何 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>
Any help with this would be really appreciated and don't hesitate to point out any massively amateur mistakes. I'm willing to take any criticism and learn from it. Thanks
对此的任何帮助将不胜感激，并毫不犹豫地指出任何大量的业余错误。我愿意接受任何批评并从中吸取教训。谢谢
采纳答案by Josh Powell
I have made you a basic set up to show how you would style this. The best way that I have found to set the height to 100%is with the use of jQuery/Javascript. You can find the height of the window and then input that into the css with the use of it.
我已经为你做了一个基本的设置来展示你将如何设计它。我发现将高度设置为 100% 的最佳方法是使用 jQuery/Javascript。您可以找到窗口的高度，然后使用它将其输入到 css 中。
The way this works is the var wH = $(window).height();is finding the height and turning that into a number. Then when you use $('.sideBar').css({height: wH});you are inputing the height into the css of sideBar.
它的工作方式var wH = $(window).height();是找到高度并将其转换为数字。然后当您使用时，您$('.sideBar').css({height: wH});将高度输入到 sideBar 的 css 中。
jQuery
jQuery
function windowH() {
var wH = $(window).height();
$('.sideBar, .mainImg').css({height: wH});
}
windowH();
This function I wrote is giving those two elements the height of the window. This will allow those two elements to be 100% of any browser's window.
我写的这个函数是给这两个元素提供窗口的高度。这将允许这两个元素成为任何浏览器窗口的 100%。
I also recommend turning that navinto a ulwhich I included in the fiddle to show how that is possible.
我还建议将其nav转换为ul我包含在小提琴中的 a 以展示这是如何可能的。
JSFIDDLE(Remove 'show' at the end of the url to see code)
JSFIDDLE（删除网址末尾的“show”以查看代码）
The next thing you will need to research is media queriesto adjust the content to adapt better to mobile devices. Consider changing the sideBar to a horizontal nav when on mobile devices.
您接下来需要研究的是media queries调整内容以更好地适应移动设备。考虑在移动设备上将 sideBar 更改为水平导航。
If you want a pure CSSonly approach then you can do something like this,
如果你想要一个纯粹的CSS方法，那么你可以做这样的事情，
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
By adding height&width to 100% in your html/bodyyou can then use height: 100%on other elements to fill the entire page.
通过在您的html/中将高度和宽度添加到 100%，body然后您可以height: 100%在其他元素上使用以填充整个页面。
Refer to this JSFIDDLEto see how it works.
请参阅此JSFIDDLE以了解其工作原理。
回答by Foad Tahmasebi
Here's just a simplified code example of the HTML:
这只是 HTML 的一个简化代码示例：
<div id="welcome">
your content on screen 1
</div>
<div id="projects">
your content on screen 2
</div>
and here's the CSS using vh:
这是使用 vh 的 CSS：
div#welcome {
height: 100vh;
background: black;
}
div#projects {
height: 100vh;
background: yellow;
}
From Here: http://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/
从这里：http: //stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/
It works for me.
这个对我有用。
回答by bittnkr
On Chrome, just adding display: flexon the bodyis enough.
在 Chrome 上，只需添加display: flex就body足够了。
On Firefox, you must add height: 100vhto get the desired result. And a margin: 0will get rid of the annoying scroll bars.
在 Firefox 上，您必须添加height: 100vh才能获得所需的结果。并且 amargin: 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>
回答by Sridhar
Sample code for exact Covering the page height.
精确覆盖页面高度的示例代码。
HTML
HTML
<div class="container">
<div class="header">
<h1>Header</h1>
</div>
<div class="content">
Main content
</div>
</div>
CSS
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);
}
Example Link : https://codepen.io/rahdirs/pen/jeRVod
