Hello, friends. I'm looking for the solution how to realize this idea. I know CSS, but now I can't understand the principle. Please show me the way. I don't want use JS, maybe you know how to make it on clear css?
Here is what I want:
1. If the Browser window smaller or equal 800px, than grey div (look at the picture bellow) height = 100% - footer. And footer should be bottom of the window, even if the window smaller than 800px.
2. If the browser window great than 800px, grey div should keep height not great than 800px + footer.
Hello, friends. I'm looking for the solution how to realize this idea. I know CSS, but now I can't understand the principle. Please show me the way. I don't want use JS, maybe you know how to make it on clear css?
Here is what I want:
1. If the Browser window smaller or equal 800px, than grey div (look at the picture bellow) height = 100% - footer. And footer should be bottom of the window, even if the window smaller than 800px.
2. If the browser window great than 800px, grey div should keep height not great than 800px + footer.
I managed to solve part of the problem!
Please try to use this code:
HTML Code:
<!DOCTYPE HTML><html><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><style type="text/css">
body{
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
}
#main_content {
width:730px;
margin: 0 auto;
}
a:link {
color: #2d76cf;
}
a:hover{
color: #53a9e8;
}
.height_fixer{
width: 740px;
background: red;
height: 100%;
position: absolute;
max-height: 800px;
overflow-y: scroll;
overflow-x: hidden;
}
.wrapper{
width: 730px;
margin: 0 auto;
}
.text{
width: 730px;
padding: 10px 10px;
background: yellow;
height: 100%;
position: absolute;
}
.footer{
width: 100%;
height: 40px;
background: #333;
position: absolute;
bottom: 0;
opacity: 0.9;
}
#top_text {
font-size:24px;
margin-top:30px;
font-weight: bold;
text-align:left;
}
.one_text{
max-height: 800px;
overflow-y: scroll;
overflow-x: hidden;
}
#chat_text {
}
.two_text {
position: relative;
}
</style><head><title></title></head><body><div id="main_content"><div class="wrapper"><div class="height_fixer"><div class="text"><div id="top_text">
top text
</div><div id="chat_text"><span class="one_text">Lorem ipsum dolor sit amet, dolor facilisis in tellus sed. Commodo phasellus ultrices adipiscing. Sed consectetuer molestie id consequat id justo, leo elementum lectus vestibulum pede, sed suspendisse elementum, libero varius. Lectus diam porta ut luctus posuere integer, magna dapibus euismod integer, neque vehicula, ac vel aliquam malesuada Lorem ipsum dolor sit amet, dolor facilisis in tellus sed. Commodo phasellus ultrices adipiscing. Sed consectetuer molestie id consequat id justo, leo elementum lectus vestibulum pede, sed suspendisse elementum, libero varius. Lectus diam porta ut luctus posuere integer, magna dapibus euismod integer, neque vehicula, ac vel aliquam malesuada Lorem ipsum dolor sit amet, dolor facilisis in tellus sed. Commodo phasellus ultrices adipiscing. Sed consectetuer molestie id consequat id justo, leo elementum lectus vestibulum pede, sed suspendisse elementum, libero varius. Lectus diam porta ut luctus posuere integer, magna dapibus euismod integer, neque vehicula, ac vel aliquam malesuadaLorem ipsum dolor sit amet, dolor facilisis in tellus sed. Commodo phasellus ultrices adipiscing. Sed consectetuer molestie id consequat id justo, leo elementum lectus vestibulum pede, sed suspendisse elementum, libero varius. Lectus diam porta ut luctus posuere integer, magna dapibus euismod integer, neque vehicula, ac vel aliquam malesuadaLorem ipsum dolor sit amet, dolor facilisis in tellus sed. Commodo phasellus ultrices adipiscing. Sed consectetuer molestie id consequat id justo, leo elementum lectus vestibulum pede, sed suspendisse elementum, libero varius. Lectus diam porta ut luctus posuere integer, magna dapibus euismod integer, neque vehicula, ac vel aliquam malesuadaLorem ipsum dolor sit amet, dolor facilisis in tellus sed. Commodo phasellus ultrices adipiscing. Sed consectetuer molestie id consequat id justo, leo elementum lectus vestibulum pede, sed suspendisse elementum, libero varius. Lectus diam porta ut luctus posuere integer, magna dapibus euismod integer, neque vehicula, ac vel aliquam malesuadaLorem ipsum dolor sit amet, dolor facilisis in tellus sed. Commodo phasellus ultrices adipiscing. Sed consectetuer molestie id consequat id justo, leo elementum lectus vestibulum pede, sed suspendisse elementum, libero varius. Lectus diam porta ut luctus posuere integer, magna dapibus euismod integer, neque vehicula, ac vel aliquam malesuadaLorem ipsum dolor sit amet, dolor facilisis in tellus sed. Commodo phasellus ultrices adipiscing. Sed consectetuer molestie id consequat id justo, leo elementum lectus vestibulum pede, sed suspendisse elementum, libero varius. Lectus diam porta ut luctus posuere integer, magna dapibus euismod integer, neque vehicula, ac vel aliquam malesuadaLorem ipsum dolor sit amet, dolor facilisis in tellus sed. Commodo phasellus ultrices adipiscing. Sed consectetuer molestie id consequat id justo, leo elementum lectus vestibulum pede, sed suspendisse elementum, libero varius. Lectus diam porta ut luctus posuere integer, magna dapibus euismod integer, neque vehicula, ac vel aliquam malesuadaLorem ipsum dolor sit amet, dolor facilisis in tellus sed. Commodo phasellus ultrices adipiscing. Sed consectetuer molestie id consequat id justo, leo elementum lectus vestibulum pede, sed suspendisse elementum, libero varius. Lectus diam porta ut luctus posuere integer, magna dapibus euismod integer, neque vehicula, ac vel aliquam malesuadaLorem ipsum dolor sit amet, dolor facilisis in tellus sed. Commodo phasellus ultrices adipiscing. Sed consectetuer molestie id consequat id justo, leo elementum lectus vestibulum pede, sed suspendisse elementum, libero varius. Lectus diam porta ut luctus posuere integer, magna dapibus euismod integer, neque vehicula, ac vel aliquam malesuadaLorem ipsum dolor sit amet, dolor facilisis in tellus sed. Commodo phasellus ultrices adipiscing. Sed consectetuer molestie id consequat id justo, leo elementum lectus vestibulum pede, sed suspendisse elementum, libero varius. Lectus diam porta ut luctus posuere integer, magna dapibus euismod integer, neque vehicula, ac vel aliquam malesuadaLorem ipsum dolor sit amet, dolor facilisis in tellus sed. Commodo phasellus ultrices adipiscing. Sed consectetuer molestie id consequat id justo, leo elementum lectus vestibulum pede, sed suspendisse elementum, libero varius. Lectus diam porta ut luctus posuere integer, magna dapibus euismod integer, neque vehicula, ac vel aliquam malesuadaLorem ipsum dolor sit amet, dolor facilisis in tellus sed. Commodo phasellus ultrices adipiscing. Sed consectetuer molestie id consequat id justo, leo elementum lectus vestibulum pede, sed suspendisse elementum, libero varius. Lectus diam porta ut luctus posuere integer, magna dapibus euismod integer, neque vehicula, ac vel aliquam malesuadaLorem ipsum dolor sit amet, dolor facilisis in tellus sed. Commodo phasellus ultrices adipiscing. Sed consectetuer molestie id consequat id justo, leo elementum lectus vestibulum pede, sed suspendisse elementum, libero varius. Lectus diam porta ut luctus posuere integer, magna dapibus euismod integer, neque vehicula, ac vel aliquam malesuadaLorem ipsum dolor sit amet, dolor facilisis in tellus sed. Commodo phasellus ultrices adipiscing. Sed consectetuer molestie id consequat id justo, leo elementum lectus vestibulum pede, sed suspendisse elementum, libero varius. Lectus diam porta ut luctus posuere integer, magna dapibus euismod integer, neque vehicula, ac vel aliquam malesuadaLorem ipsum dolor sit amet, dolor facilisis in tellus sed. Commodo phasellus ultrices adipiscing. Sed consectetuer molestie id consequat id justo, leo elementum lectus vestibulum pede, sed suspendisse elementum, libero varius. Lectus diam porta ut luctus posuere integer, magna dapibus euismod integer, neque vehicula, ac vel aliquam malesuadaLorem ipsum dolor sit amet, dolor facilisis in tellus sed. Commodo phasellus ultrices adipiscing. Sed consectetuer molestie id consequat id justo, leo elementum lectus vestibulum pede, sed suspendisse elementum, libero varius. Lectus diam porta ut luctus posuere integer, magna dapibus euismod integer, neque vehicula, ac vel aliquam malesuadaLorem ipsum dolor sit amet, dolor facilisis in tellus sed. Commodo phasellus ultrices adipiscing. Sed consectetuer molestie id consequat id justo, leo elementum lectus vestibulum pede, sed suspendisse elementum, libero varius. Lectus diam porta ut luctus posuere integer, magna dapibus euismod integer, neque vehicula, ac vel aliquam malesuadaLorem ipsum dolor sit amet, dolor facilisis in tellus sed. Commodo phasellus ultrices adipiscing. Sed consectetuer molestie id consequat id justo, leo elementum lectus vestibulum pede, sed suspendisse elementum, libero varius. Lectus diam porta ut luctus posuere integer, magna dapibus euismod integer, neque vehicula, ac vel aliquam malesuada
</span></div></div><div class="footer"></div></div></div></div></body></html>
Different div height for different browser height
Reply With Quote
Originally Posted by ijs
Bookmarks