How to resize content area with CSS dynamically and no javascript_问答_开发者

How to resize content area with CSS dynamically and no javascript

开发者 https://www.devze.com 2023-02-11 04:32 出处：网络

I want is this: the blue area resizes with when the browser window resizes. The header is visible. the blue area starts where the header finishes (not behind the header or above).

相关专题：css

I want is this:

the blue area resizes with when the browser window resizes.
The header is visible.
the blue area starts where the header finishes (not behind the header or above).
the blue area ends before the footer.
between the blue area and the footer exist 5 yellow pixels.

Is this possible only with CSS and HTML ( without any javascript ) ?

<!doctype html>
<html lang="en-US">
<head>
    <meta charset="utf-8"/>
    <title>Test</title>

    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>
    <sty开发者_开发技巧le>

    *{
        margin:0px;
        padding:0px;
    }

    header, nav, article, footer, address {  
        display: block;  
    }

    header{
        position:relative; height: 50px; background-color:#2b2b2b;
    }

    footer{
        height: 50px; 
        width:100%; 
        bottom: 0px; 
        position: fixed; 
        background: red;
    }

    #explorer{
        position:relative; bottom:55px; 
    }

    #sections{
        width: 100%; height: 100%; bottom: 55px; position:fixed; background: blue;
    }

    </style>
</head>

<body style="background-color:yellow">
    <header >
        <h1>Test</h1>
    </header>
  <div id="explorer" >
      <div id="sections" >
   &nbsp;
      </div>
  </div>
  <footer>
       /* Footer Content */
  </footer>
</body>

</html>

I think Kit's code needs just one adjustment & that is we have to remove the height:100% from the sections div & it will work just fine. Also while testing the following code, i noticed that if we reduce the height beyond a limit the footer actually comes above the header. Although, practically the height would never be so less, but still you might want to add z-index:5000 to header tag

Like this?

<html>
<head>
    <meta charset="utf-8"/>
    <title>Test</title>
    <style type="text/css">

    html, body, h1 {
        margin:0px;
        padding:0px;
    }

    header, nav, article, section, footer, address {  
        display: block;  
    }

    header {
        position:relative;
        height: 50px;
        width: 100%;
        background-color:#2b2b2b;
    }

    footer{
        height: 50px; 
        width:100%; 
        bottom: 0px; 
        position: fixed; 
        background: red;
        border-top: 5px solid yellow;
    }

    #explorer{
        position:relative; bottom:55px; 
    }

    #sections{
        width: 100%;
        height: 100%;
        bottom: 55px;
        position:fixed;
        top: 50px;
        background: rgba(0,0,256,.5);
    }

    </style>
</head>
<body>
    <header >
        <h1>Test</h1>
    </header>
    <div id="explorer" >
        <div id="sections" >
        &nbsp;
        </div>
    </div>
    <footer>
        /* Footer Content */
    </footer>
</body>