www.webdeveloper.com
Results 1 to 4 of 4

Thread: Different div height for different browser height

  1. #1
    Join Date
    May 2011
    Posts
    58

    Exclamation Different div height for different browser height

    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.

    Please look at this image

    Thank you!
    Last edited by ijs; 06-28-2011 at 03:18 AM.

  2. #2
    Join Date
    Sep 2008
    Posts
    260
    Quote Originally Posted by ijs View Post
    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.

    Please look at this image

    Thank you!
    You have to use JavaScript for this. CSS cannot detect the size of a viewers window.

  3. #3
    Join Date
    May 2011
    Posts
    58
    @ChuckB: Can you show me your solution with JS? Please.

  4. #4
    Join Date
    May 2011
    Posts
    58
    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&#37;;
    	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>
    But, how to make .one_text have scroll, and don't be under footer?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles