Html 页面高度是否为视口的100%？_Html_Css_Height

Html 页面高度是否为视口的100%？

html css

Html 页面高度是否为视口的100%？,html,css,height,Html,Css,Height,我首先要说的是，我对整个web开发非常陌生，这是我第一个响应速度非常快的网站，所以请温柔一点，记住这一点，我是这个阶段noob一词的定义。寻找答案已经有一段时间了，但运气不好，我希望这里有人能帮我我正在尝试为这个网站制作一个主页。该设计只是在页面左侧下方的一个区块，在顶部显示徽标，然后在底部显示一系列链接，所有这些链接都位于同一背景上。在这张图片的右边是一张大图片，它占据了屏幕的其余部分。我希望整个页面都能填满在任何设备上查看的浏览器窗口，因此绝对不需要滚动，即宽度和高度均为视口的100%。页

我首先要说的是，我对整个web开发非常陌生，这是我第一个响应速度非常快的网站，所以请温柔一点，记住这一点，我是这个阶段noob一词的定义。寻找答案已经有一段时间了，但运气不好，我希望这里有人能帮我

我正在尝试为这个网站制作一个主页。该设计只是在页面左侧下方的一个区块，在顶部显示徽标，然后在底部显示一系列链接，所有这些链接都位于同一背景上。在这张图片的右边是一张大图片，它占据了屏幕的其余部分。我希望整个页面都能填满在任何设备上查看的浏览器窗口，因此绝对不需要滚动，即宽度和高度均为视口的100%。页面的宽度一点也不让我感到悲伤，我可以根据自己的需要调整不同的屏幕大小，边栏的宽度为20%，主图像的宽度为80%

然而，高度是另一回事。到目前为止，在我尝试过的任何CSS组合中，我似乎都无法获得在视口100%处的高度。要么侧边栏太短，要么主图像太长，要么两者都太长，等等。主图像我想保持纵横比，只是让它溢出它的div，根据需要保持大部分显示，侧边栏我只想适合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>


html
{
身高：100%；
保证金：0；
填充：0；
}
身体
{
身高：100%；
保证金：0；
填充：0；
}
#页面
{
宽度：100%；
身高：100%；
保证金：0；
填充：0；
}
#边栏
{
浮动：左；
宽度：20%；
身高：100%；
垫底：10；
保证金：0；
背景：url（/Images/bg.jpg）；
}
#幻灯片放映
{
浮动：对；
宽度：80%；
身高：100%；
溢出：隐藏；
保证金：0；
填充：0；
}
#标识
{
宽度：80%；
利润率最高：10%；
左边距：10%；
保证金权利：10%；
}
#维护
{
宽度：100%；
溢出：隐藏；
}
链接
{
字体系列：信使；
字体大小：1.3em；
文本对齐：居中；
垫顶：7%；
垫底：1%；
颜色：rgba（255255,1.00）；
}
@字体
{
字体系列：信使；
src:url（/courier\u new-webfont.ttf）；
src:url（/courier\u new-webfont.eot）；
src:url（/courier\u new-webfont.woff）；
}
家
关于
画廊
价格
评论
接触
客户

如果您能在这方面提供帮助，我们将不胜感激，并毫不犹豫地指出任何严重的业余错误。我愿意接受任何批评并从中吸取教训。谢谢

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

其工作方式是

var wH=$（window.height（）正在查找高度并将其转换为数字。然后当您使用$（'.sideBar'）.css（{height:wH}）时您正在侧边栏的css中输入高度
jQuery
function windowH() {
   var wH = $(window).height();

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

windowH();

我写的这个函数为这两个元素提供了窗口的高度。这将允许这两个元素在任何浏览器窗口中100%显示
我还建议将nav
转换为ul
，我将其包含在小提琴中，以说明这是如何实现的
（删除url末尾的“show”以查看代码）
接下来您需要研究的是媒体查询，以调整内容以更好地适应移动设备。考虑在移动设备上将边栏更改为水平导航。
如果您想要纯CSS
方法，那么您可以这样做，
html, body {
   height: 100%;
   width: 100%;
   margin: 0;
   padding: 0;
}

通过在html
/正文中添加100%的高度和宽度，您可以在其他元素上使用height:100%
填充整个页面
请参阅此文档以了解其工作原理
这里只是一个简化的HTML代码示例：
<div id="welcome">
    your content on screen 1
</div>
<div id="projects">
    your content on screen 2
</div>

从这里开始：
它适合我。
精确覆盖页面高度的示例代码
HTML

示例链接：
在Chrome上，只需在主体上添加显示：flex
就足够了
在Firefox上，必须添加height:100vh
才能获得所需的结果。而边距：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>


我建议的第一件事是删除该样式标记，并将css转移到它自己的页面上。如果您要将媒体查询和所有内容纳入这个等式，那么您需要一个单独的css页面。那么，对于包括垂直视口在内的所有全高断点，建议的scrset大小是多少？我知道1600x900，但我有垂直的问题！我从来没有做过这样的布局，所以我想这对我们双方都有好处。您还可以像这样设置高度：var wH=$（window）.height（）/2var wH=$（window.height（）/4这将是高度的1/4。如果这个答案对你有帮助，请不要忘记将它标记为正确答案。祝你的设计好运，请随时问我任何问题！“纯CSS”答案仅适用于主体的直接后代，如果元素的容器具有不同的高度（高于浏览器视口），则将该元素的高度设置为100%将使其高于视口。最好的“纯CSS”方法是使用vh，就像下面@Arshen的回答一样。
<div class="container">  
  <div class="header">
    <h1>Header</h1>
  </div>
  <div class="content">
    Main content
  </div>
</div>

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);
}

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