div填充剩余宽度 html元素如何仅使用css填充剩余屏幕高度的100%?




div填充剩余宽度 (12)

接受的答案不起作用。 最高投票的答案并不能回答实际问题。 使用固定的像素高度标题,并在浏览器的剩余显示中填充,并滚动以进行功率流。 这是一个使用绝对定位实际工作的解决方案。 我还假设通过问题中“固定标题”的声音知道标题的高度。 我在这里以150px为例:

HTML:

<html>
    <body>
        <div id="Header">
        </div>
        <div id="Content">      
        </div>
    </body>
</html>

CSS :(仅为视觉效果添加背景色)

#Header
{
    height: 150px;
    width: 100%;
    background-color: #ddd;
}
#Content
{
   position: absolute;
   width: 100%;
   top: 150px;
   bottom: 0;
   background-color: #aaa;
   overflow-y: scroll;
}

有关其工作原理的详细信息,请参阅#Content实际内容,使用bootstrap行和列查看此jsfiddle

我有一个标题元素和一个内容元素:

#header
#content

我希望标题具有固定的高度和内容以填充屏幕上可用的所有剩余高度,具有overflow-y: scroll;

这可能没有Javascript?


Answer #1

在这个例子中,我希望我的主要内容div是液体高度,以便整个页面占据浏览器高度的100%。

height: 100vh;



Answer #3

到目前为止我找到的最佳解决方案是在页面底部设置页脚元素,然后评估页脚的偏移量和我们需要展开的元素的差异。 例如

html文件

<div id="contents"></div>
<div id="footer"></div>

css文件

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

js文件(使用jquery)

var contents = $('#contents'); 
var footer = $('#footer');
contents.css('height', (footer.offset().top - contents.offset().top) + 'px');

您可能还想更新每个窗口调整大小的contents元素的高度,所以...

$(window).on('resize', function() {
  contents.css('height', (footer.offset().top -contents.offset().top) + 'px');
});

Answer #4

对我来说,下一个效果很好:

我将标题和内容包装在div上

<div class="main-wrapper">
    <div class="header">

    </div>
    <div class="content">

    </div>
</div>

我用这个reference用flexbox填充高度。 CSS是这样的:

.main-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.header {
    flex: 1;
}
.content {
    flex: 1;
}

有关flexbox技术的更多信息,请访问reference


Answer #5

这方面的技巧是在html和body元素上指定100%的高度。 有些浏览器会查看父元素(html,body)来计算高度。

<html>
    <body>
        <div id="Header">
        </div>
        <div id="Content">
        </div>
    </body>
</html>

html, body
{
    height: 100%;
}
#Header
{
    width: 960px;
    height: 150px;
}
#Content
{
    height: 100%;
    width: 960px;
}

Answer #6

除非您需要支持IE 9及更低版本,否则我会使用flexbox

body { display: flex; flex-direction: column; }
.header { height: 70px; }
.content { flex: 1 1 0 }

你还需要让身体填满整个页面

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

Answer #7

使用HTML5,您可以执行以下操作:

CSS:

body, html{ width:100%; height:100%; padding: 0; margin: 0;}
header{ width:100%; height: 70px; }
section{ width: 100%; height: calc(100% - 70px);}

HTML:

<header>blabablalba </header>
<section> Content </section>


Answer #9

接受的解决方案实际上不起作用。 您会注意到内容div将等于其父节点的高度。 因此,将body高度设置为100%将使其等于浏览器窗口的高度。 假设浏览器窗口的高度为768px ,通过将内容div高度设置为100%div的高度将依次为768px 。 因此,最终标题div为150px ,内容div为768px 。 最后,您将获得低于页面底部150px的内容。 有关其他解决方案,请查看此链接。


Answer #10

实际上最好的方法是:

html { 
    height:100%;
}
body { 
    min-height:100%;
}

这解决了我的一切,它帮助我控制我的页脚,无论页面是否向下滚动,它都可以有固定的页脚。

技术解决方案 - 已编辑

从历史上看,“高度”是一个难以塑造的东西,与“宽度”相比,最容易。 因为css专注于<body>以便样式化工作。 上面的代码 - 我们给了<html><body>一个高度。 这就是魔术进入画面的地方 - 因为我们在桌面上有'min-height',我们告诉浏览器<body>优于<html>因为<body>保持最小高度。 反过来,允许<body>覆盖<html>因为<html>已经具有较高的高度。 换句话说,我们正在欺骗浏览器从表中“撞” <html> ,因此我们可以独立设计风格。


Answer #11

忘了所有答案,这行CSS在2秒内为我工作:

height:100vh;

1vh =浏览器屏幕高度的1%

source

对于响应式布局缩放,您可能希望使用:

min-height: 100vh

[更新2018年11月]正如评论中所提到的,使用最小高度可能会避免在reponsive设计上出现问题

[更新2018年4月]正如评论中所提到的,早在2011年提出问题时,并非所有浏览器都支持视口单元。 其他答案是当时的解决方案 - IE中仍然不支持vmax ,因此这可能不是所有人的最佳解决方案。





css