DIV-强制高度100％=/=页面高度? [英] DIV - Force height 100%=/= page height?

问题描述

在这里，我要设置的设计存在很大的问题.这是供参考的网站；

I am in a big of an issue here with a design I am trying to set up. Here is the website for a reference;

http://throwbackhero.com/index1.php

问题是我将主体设置为高度:100％；在样式表和#wrapper div中.该高度超出了当前页面的高度，并且没有考虑到可能导致溢出的其他div.

The problem is that I set the body to height: 100%; in the stylesheet and on the #wrapper div as well. The height goes off the current page height and does not take into account that there are other divs that could cause overflow.

我希望空白页面成为浏览器的大小，即使浏览器的垂直大小发生变化，内容/包装div也将缩小以容纳该页面.

I would like, a blank page to be the size of the browser even if the vertical size of the browser is changed, the content/wrapper div will shrink to accommodate.

可以做到吗?

编辑

好吧，很清楚我最初的问题非常令人困惑.这是一张图片；

Okay so clearly my original question was extremely confusing. Here is a picture;

因此，在图片1(左侧)中就是问题所在.身高100％;在包装程序和内容div上，它是在创建那个坏男孩.我希望它看起来像图片，其中白色/灰色区域根据浏览器的大小而增加/缩小...

So, in pic 1 (the left) is the issue. With height 100%; on the wrapper and content divs, it is creating that bad boy. I want it to look like picture, where the white/gray area grows/shrinks depending on the size of the browser...

推荐答案

最简单的方法就是使用CSS:

The easiest way is simply using CSS:

height: 100vh;

其中"vh"代表浏览器窗口的垂直高度. 响应浏览器和移动设备的大小调整.

Where 'vh' stands as vertical height of the browser window. Responsive to resizing of brower and mobile devices.

这篇关于DIV-强制高度100％=/=页面高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！