如何使用CSS的页眉和页脚之间的div响应高度只？ [英] How to make a div responsive height between header and footer with CSS only?
问题描述
我有一个HTML页面，其中包含固定高度的页眉和页脚以及两者之间的元素。
我想让元素始终具有屏幕的总高度标题和页脚）。例如，假设屏幕的总高度为1000px，每个页眉/页脚的固定高度为60px - > div元素高度应为880px。
现在，我有它的挑战，使其响应（无论是什么是屏幕大小，行为应该如描述）没有使用JavaScript / JQuery。 CSS。
我开始使用height：100％但不知道如何继续...
< html>
< head>< / head>
< body>
< header class =header> my header< / header>
< div class =content> content< / div>
< footer class =footer>我的页脚< / footer>
< / body>
< / html>
http://codepen.io/anon/pen/QbGZgL
注意：还应支持IE 10 ...
我考虑过flexbox，但不知道我该如何使用它。假设我在页面的内容中有一些文本和一些图像。 我不想在屏幕较小时显示垂直滚动条，我希望整个内容缩小，以便填充可用的高度。
是否CSS3视口单位：vh / vw / vmin / vmax可以帮助我？
我想你想要完成的。 IE10支持是可能的，只有你必须为flex属性添加/使用旧的语法。
我们有一个包装器元素，我们说：现在是一个flex元素，您的子元素可以是带有display：flex的flex（可见）元素;
对于我们使用列的方向，默认为'row'，但我们希望它们在下。
最后，我们定义页眉和页脚的高度，然后定义主要元素：你有flex属性'1'。
body，html {height：100％; margin：0; padding：0;}。wrapper {display：flex;高度：100％; flex-direction：column; -ms-flex-direction：column; background：red;} header {height：100px; background：blue;} main {flex：1; background：orange;} footer {height：20px; background：yellow;}
< div class = > < header>标头元素< / header> < main> < h1>主< / h1> < / main> < footer> Footer< / footer>< / div>
I have an HTML page with fixed height header and footer and a element in between.
I want the element to have always the total height of the screen (excluding the header and the footer). For example, let's say the total height of the screen is 1000px and each of the header/footer has fixed height of 60px --> the div element height should be 880px. Now, the challenge I have it to make it responsive (no matter what is the screen size, the behavior should be as described) WITHOUT using JavaScript/JQuery. CSS only.
I've started by using "height: 100%" but don't know how to proceed...
<html>
<head></head>
<body>
<header class="header">my header</header>
<div class="content">content</div>
<footer class="footer">my footer</footer>
</body>
</html>
http://codepen.io/anon/pen/QbGZgL
Note: IE 10 should be supported as well...
I have considered flexbox, but didn't understand how exactly I can use it for my needs. Let's say I have some text and some images in the content of the page. I do not want a vertical scroller to appear when the screen is smaller, I want the whole content to shrink so it will fill the available height.
Does CSS3 viewport units: vh/vw/vmin/vmax can help me here?
This is a simple setup with what I think you want to accomplish. IE10 support is possible only you have to prefix / use old syntax for the flex property.
We have a wrapper element to which we say: you are now a flex element and your child elements can be flex(ible) elements with display: flex;
For the direction we use column, default is 'row' but we want them under each other.
Finally we define heights to the header and footer and so to the main element: you have the flex property '1'. Which will fill up the space that is left over between the elements.
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.wrapper {
display: flex;
height: 100%;
flex-direction: column;
-ms-flex-direction: column;
background: red;
}
header {
height: 100px;
background: blue;
}
main {
flex: 1;
background: orange;
}
footer {
height: 20px;
background: yellow;
}
<div class="wrapper">
<header>
Header element
</header>
<main>
<h1> Main</h1>
</main>
<footer>
Footer
</footer>
</div>
这篇关于如何使用CSS的页眉和页脚之间的div响应高度只？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
