Css DIV-强制高度100%=/=页面高度？_Css_Html_Height

Css DIV-强制高度100%=/=页面高度？

css html

Css DIV-强制高度100%=/=页面高度？,css,html,height,Css,Html,Height,我在这里遇到了一个很大的问题，我正试图建立一个设计。这里是网站供参考问题是我将身体设置为高度：100%；在样式表和#wrapper div中。该高度偏离当前页面高度，不考虑可能导致溢出的其他div 我希望，一个空白页面是浏览器的大小，即使浏览器的垂直大小改变，内容/包装div也会缩小以适应这能做到吗编辑很明显，我最初的问题非常令人困惑。这是一张照片因此，在图1中（左边）是问题所在。身高100%；在包装器和内容分区上，它正在创建那个坏男孩。我希望它看起来像图片一样，其中白色/灰色区域

我在这里遇到了一个很大的问题，我正试图建立一个设计。这里是网站供参考

问题是我将身体设置为高度：100%；在样式表和#wrapper div中。该高度偏离当前页面高度，不考虑可能导致溢出的其他div

我希望，一个空白页面是浏览器的大小，即使浏览器的垂直大小改变，内容/包装div也会缩小以适应

这能做到吗

编辑

很明显，我最初的问题非常令人困惑。这是一张照片

因此，在图1中（左边）是问题所在。身高100%；在包装器和内容分区上，它正在创建那个坏男孩。我希望它看起来像图片一样，其中白色/灰色区域根据浏览器的大小而增大/缩小…

将

溢出：auto

添加到

包装

元素。

给body、HTML和main DIV

高度100%

。这样写：

body,html{height:100%;}

.parent{
    min-height:100%;
    width:400px;
    margin:0 auto;
    background:red;
}

检查此项

此问题没有完整的CSS解决方案。这个CSS“问题”已经被知道很多年了。由于CSS的功能在过去的几年中有所增长，我认为现在可能有一个完整的CSS解决方案。但是，唉，没有。我尝试了很多东西，到处寻找，但问题还是一样

据我所知，只有3种解决方案不需要第三方库：绝对定位、人造柱（双色调重复背景）和JS

唯一吸引我的两个解决方案是：faux columns和JS。我更喜欢JS解决方案，因为它更多地使用CSS。使用JS，如果以后要更改列宽或颜色，则无需重新处理背景图像。这是一个适应性更强、可重复使用的解决方案。我所看到的创建人造列的唯一优势是，如果客户端禁用JS，您的布局不会中断

JS解决方案（不需要包装）：

说明：如果使用div包装，则可以将其指定给包装的高度。如果不使用包装，则可以将最短边的高度设置为最长边的高度。如果您知道侧菜单栏总是比内容短，那么您只需要两行代码：

var contentHeight = document.getElementsByTagName('main')[0].clientHeight;
document.getElementById('mainMenu').style.height = contentHeight + "px";

最简单的方法就是简单地使用CSS：

height: 100vh;

其中“vh”表示浏览器窗口的垂直高度。

对浏览器和移动设备的大小调整做出响应。

如果您可以在页面上每毫秒运行一次JavaScript，并且白色区域上方的内容将始终保持相同的像素高度，您可以尝试以下方法

bodyLeadingFill = // put the size taken up by everything above the white div,
                  // including margin, padding, border, etc
function resizeElement(){
    document.getElementById(/* name of white element here */).style.height = (window.innerHeight - bodyLeadingFill) * (/* put the % size you need here */ / 100) + "%";
}
window.setTimeout(resizeElement, 0);

当然，这是假设无论字体、操作系统或窗口大小，白框上方的内容总是相同大小

我并没有亲自测试这个，但是这个概念应该是可行的。注意那些说明在哪里放置信息的评论。

来自@sandeep的答案是正确的。控制浏览器中最基本的显示容器的最佳方法是控制html/body

通常，我需要与您设计相同的结构： 1.内容应留在容器内，无溢出滚动，以及 2.浏览器调整大小时，容器应调整为100%

因此，这样做的基本方法是：

html, body {
    height: 100%;
}

我总是将基本容器的高度和宽度都设置为合适：

html, body {
    width: 100%;
    height: 100%;
}

注意：某些浏览器（作为用户代理样式表）可能存在边距/填充问题：为一些基本组件（如默认的body）添加样式（例如Chrome 70.0.3538.102）：

在开发人员模式中进行检查，如果出现这种情况，请添加边距覆盖，这也适用于填充：

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

如果您的页面基础组件看起来像：

<body>
    <div id="div1">
        my html content ...
    </div>
</body>

这对我总是有用的。希望能有帮助。下面是我猜的你想要达到的目标

html，正文{
保证金：0；
宽度：100%；
身高：100%；
}
#第一组{
位置：相对位置；
宽度：60%；
身高：100%；
背景色：rgb（255125125）；
浮动：左；
}
#第二组{
位置：相对位置；
宽度：40%；
身高：100%；
背景色：rgb（125255125）；
浮动：左；
}

第1层
第二层

你的问题很模糊。你的意思是#wrapper的大小与浏览器的大小相同吗？确定的可能副本在涉及到第二个div之前这是可以的。试试看。看看它是如何产生溢出问题的，而不仅仅是页面高度的100%？我想避免这样，救了我的命！几乎所有现代手机和非浏览器都支持+1如果您必须滚动并且需要div比视口高，则此选项不起作用。我从未听说过此css后缀。美好的在bootstrap框架中工作得很好。谢谢

body {
    display: block;
    margin: 8px;
}

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

<body>
    <div id="div1">
        my html content ...
    </div>
</body>

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

#div1 {
    position: absolute;
    width: 100%;
    height: 100%;
}