All geek questions in one place

How to resize content area using CSS dynamically and without javascript

I want it:

  • resizes the blue area when resizing the browser window.
  • The title is displayed.
  • the blue area begins where the heading ends (not behind the heading or above).
  • the blue area ends in front of the footer.
  • there are 5 yellow pixels between the blue area and the footer.

Is this only possible with CSS and HTML (without 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;"/>
    <style>

    *{
        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>
+3
source share
3 answers

, Kit , : 100% sections, . , , , , , . , , z-index: 5000

+5

?

<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>

+4

I just answered a similar question in How to expand a div to cover the remaining page height

0
source

Source: https://habr.com/ru/post/1793168/

More articles:


All Articles