Home >Web Front-end >HTML Tutorial >[Advice] How to use css3 to achieve adaptive height of div? _html/css_WEB-ITnose
[Advice] How to use css3 to achieve adaptive height of div? _html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:50:321169browse
The structure of the page is very simple
<html><head></head><body><div class="header"></div><div class="content"></div><div class="footer"></div></body></html>
Among them, header and footer are dynamically selected and introduced based on certain conditions. In other words, the height of the header and footer may change.
The problem encountered is that when there is very little content in the content, the height of the div will be relatively small, so the footer will appear at a very high position on a larger screen.
This is so ugly.
Please tell me how to write css so that when the screen is larger, the footer will also appear at the bottom of the screen, just like the effect on Baidu homepage.
Reply to discussion (solution)
You can put footer {
position:fix;
bottom: 0
}
Stick the footer at the bottom
You can stick the footer {
position:fix;
bottom: 0
}
Stick the footer at the bottom
Thank you.
However, with this method,
Firstly, a vertical scroll bar will appear,
Secondly, once there is too much content in the content...,
If I am not wrong, What do you mean:
<html> <head> <title>自适应高度测试</title> </head> <style> html body { height: 100%; } .header { height: 100px; } .footer { position: fixed; bottom: 0; } </style><body><div class="header">This is header</div><div class="content">This is content</div><div class="footer">This is footer</div></body></html> This is what I originally did:
<html> <head> <title>自适应高度测试</title> </head> <style> html body { height: 100%; } .header { height: 100px; } .footer { height: 100px; } .content { height: 100%; } </style><body><div class="header">This is header</div><div class="content">This is content</div><div class="footer">This is footer</div></body></html> As a result, a vertical scroll bar appeared, and the footer was directly squeezed by the conter. Out of the screen.
Please give me some advice.
<html><head></head><body><div class="header"></div><div class="content"></div><div class="footer"></div></body></html>
display:box;
box-flex:
.content{ height:auto; min-height:600px;}
<html><head></head><body><div class="header"></div><div class="content"></div><div class="footer"></div></body></html>
Thanks for the tip.
There is another problem here, that is, the header and footer are dynamically introduced and may have different heights.
display:box;
box-flex:
Thanks for the reminder.
<html> <head> <title>自适应高度测试</title> </head> <style> html body { height: 100%; } .wrap { height: 100%; display: -webkit-box; display: -moz-box; display: box; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; } .header { height: 100px; } .footer { height: 100px; } .content { /*height: 100%;*/ -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; } </style><body> <div class="wrap"> <div class="header">This is header</div> <div class="content">This is content</div> <div class="footer">This is footer</div> </div></body></html> Two small questions:
One question is to ask you to help me see if there is any problem in the code. I have seen vertical scrolling in all three browsers. strip.
Another problem is that this attribute seems not to be officially supported yet, right?
I really don’t like writing CSS with each browser’s private property definitions.
.content{ height:auto; min-height:600px;}
Excuse me, does this 600px assume that the current smallest display is "1024*768" ?
Or where did it come from, using the setting of 600.
I am viewing the page on a 1920*1200 monitor, and the footer still floats in the middle of the page.
.content{ height:auto; min-height:600px;}
Excuse me, this 600px assumes that the current smallest monitor is "1024*768"?
Or where did it come from, using the setting of 600.
I am viewing the page on a 1920*1200 monitor, and the footer still floats in the middle of the page.
Then set the 600 to a larger value. If you want to adapt to various resolutions, you have to use js. Find it online.
display:box;
box-flex:
Aha, the scroll bar problem mentioned on the 8th floor has been solved.
Haha, I’m really sorry. I haven’t done CSS for a long time, so I’m so confused.
Then, another question is, can IE support this attribute?
.content{ height:auto; min-height:600px;}
Excuse me, is this 600px? Suppose the current smallest display is "1024*768"?
Where did it come from, using the setting of 600.
I am viewing the page on a 1920*1200 monitor, and the footer still floats in the middle of the page.
Then set the 600 to a larger value. If you want to adapt to various resolutions, you have to use js. Find it online.
I should be able to write this myself, but I don’t want to use JS to handle this matter.
Let’s take a look, if there is no other way, we can only use JS.
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn