All geek questions in one place

Container with height: 100% larger than the whole page

I am trying to fill a content container to 100% height with a 30px header. But currently the content container is more than 100%, which leads to the creation of a scrollbar.

code

html {
  padding:0;
  margin: 0;
  height:100%;
}
body {
  padding:0;
  margin: 0;
  height:100%;
}
#header {
  height: 30px;
  background: black;
  width: 100%;
  position: absolute;
  z-index: 2;
}
#container {
  position: relative;
  height:100%;
  padding-top:30px;
  background-color: #aaaaaa;
}
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>
    <div id="header"></div>
    <div id="container"></div>
  </body>
</html>
Run code

Demo: https://plnkr.co/edit/48SJjl9dB7S7IiC8JLcP?p=preview

What is the right way to accomplish this? If it were possible, I would prefer the title to be positioned “relative” rather than absolute. But is it possible that this is not possible?

+4
source share
4 answers

You can try and make the following changes:

#container{
  height: calc(100% - 30px);
  padding-top: 0;
}

You can remove properties positionfor both elements, as it staticwill work fine.

Plunk

content height: 100%, , , (body ). header body, 30px. 100% + 30px , , . padding-top .

html{
  padding:0;
  margin: 0;
  height:100%;
}

body{
  padding:0;
  margin: 0;
  height:100%;
}

#header{
  height: 30px;
  background: black;
  width: 100%;
  position: relative;
}

#container{
  position: relative;
  height: calc(100% - 30px);
  background-color: #aaaaaa;
}
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
   <div id="header"></div>
   <div id="container"></div>
  </body>

</html>
+4

, div.container , #header, 30 , 100%, , 100% + 30 ; 100% + 30px;

,

height: calc(100% - 30px);
+1

You have padding-top: 30px; on your container, which stretches it further. Try adding box size: border-box; so your add-on will not stretch your container, but rather resize the inside.

0
source

I tested this and worked very well:

    #container{  
      display:block;
      height:100%;  
      background-color: #aaaaaa;
    }
-1
source

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

More articles:


All Articles