/    Sign up×
Community /Pin to ProfileBookmark

Different div height for different browser height

Copy linkTweet thisAlerts:
Jun 28.2011

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.

    • [URL=”http://img52.imageshack.us/img52/6996/cssrwj.jpg”]Please look at this image[/URL]

    Thank you!

    to post a comment
    CSS

    3 Comments(s) ↴

    Copy linkTweet thisAlerts:
    @ChuckBJun 29.2011 — 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![/QUOTE]

    You have to use JavaScript for this. CSS cannot detect the size of a viewers window.
    Copy linkTweet thisAlerts:
    @ijsauthorJun 29.2011 — @ChuckB: Can you show me your solution with JS? Please.
    Copy linkTweet thisAlerts:
    @ijsauthorJun 30.2011 — I managed to solve part of the problem!

    Please try to use this code:

    [code=html]<!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>[/code]

    But, how to make .one_text have scroll, and don't be under footer?
    ×

    Success!

    Help @ijs spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.5,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,

    tipper: @Samric24,
    tipped: article
    amount: 1000 SATS,
    )...