Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
580 views
in Technique[技术] by (71.8m points)

html - 如何使div的浏览器窗口高度为100%(How to make a div 100% height of the browser window)

I have a layout with two columns - a left div and a right div .

(我有两列的布局-左div和右div 。)

The right div has a grey background-color , and I need it to expand vertically depending on the height of the user's browser window.

(右边的div具有灰色background-color ,我需要根据用户浏览器窗口的高度将其垂直扩展。)

Right now the background-color ends at the last piece of content in that div .

(现在, background-color在该div中的最后一条内容处结束。)

I've tried height:100% , min-height:100%;

(我已经尝试过height:100%min-height:100%;)

, etc.

(等)

  ask by mike translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

There are a couple of CSS 3 measurement units called:

(有几个CSS 3度量单位,称为:)

Viewport-Percentage (or Viewport-Relative) Lengths (视口百分比(或相对于视口)长度)

What are Viewport-Percentage Lengths? (什么是视口百分比长度?)

From the linked W3 Candidate Recommendation above:

(根据上面链接的W3候选推荐书:)

The viewport-percentage lengths are relative to the size of the initial containing block.

(视口百分比长度相对于初始包含块的大小。)

When the height or width of the initial containing block is changed, they are scaled accordingly.

(更改初始包含块的高度或宽度时,将对其进行相应缩放。)

These units are vh (viewport height), vw (viewport width), vmin (viewport minimum length) and vmax (viewport maximum length).

(这些单位是vh (视口高度), vw (视口宽度), vmin (视口最小长度)和vmax (视口最大长度)。)

How can this be used to make a divider fill the height of the browser? (如何使用它来使分隔符填充浏览器的高度?)

For this question, we can make use of vh : 1vh is equal to 1% of the viewport's height.

(对于这个问题,我们可以使用vh1vh等于视口高度的1%。)

That is to say, 100vh is equal to the height of the browser window, regardless of where the element is situated in the DOM tree:

(也就是说,无论元素在DOM树中位于何处, 100vh都等于浏览器窗口的高度:)

HTML (的HTML)

<div></div>

CSS (的CSS)

div {
    height: 100vh;
}

This is literally all that's needed.

(这实际上就是所需要的。)

Here is a JSFiddle example of this in use.

(这是一个正在使用的JSFiddle示例 。)

What browsers support these new units? (哪些浏览器支持这些新单元?)

This is currently supported on all up-to-date major browsers apart from Opera Mini.

(目前,除Opera Mini之外,所有最新的主流浏览器均支持此功能。)

Check out Can I use... for further support.

(查看我可以使用...以获得更多支持。)

How can this be used with multiple columns? (如何与多列一起使用?)

In the case of the question at hand, featuring a left and a right divider, here is a JSFiddle example showing a two-column layout involving both vh and vw .

(对于具有左右分隔线的当前问题,这是一个JSFiddle示例,显示了涉及vhvw的两列布局。)

How is 100vh different to 100% ? (100vh100%有何不同?)

Take this layout for example:

(以以下布局为例:)

<body style="height:100%">
    <div style="height:200px">
        <p style="height:100%; display:block;">Hello, world!</p>
    </div>
</body>

The p tag here is set to 100% height, but because its containing div has 200 pixels height, 100% of 200 pixels becomes 200 pixels, not 100% of the body height.

(此处的p标签设置为100%高度,但是由于其包含div高度为200像素,因此200像素的100%变为200像素, 而不是 body高度的100%。)

Using 100vh instead means that the p tag will be 100% height of the body regardless of the div height.

(相反,使用100vh意味着p标签将为body 100%高度,而与div高度无关。)

Take a look at this accompanying JSFiddle to easily see the difference!

(看看这个随附的JSFiddle,可以轻松看到其中的区别!)


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...