All geek questions in one place

CSS - Content with 100% minimum height creates a vertical scrollbar

I am trying to create a page with a title with a navigation menu and a content area that fills the rest of the page, the content is at 100% minimum height, but even when it is empty, a vertical scroll bar is displayed because of the size of the title.

Relevant part of HTML:

<body> <div id="header">Davi Andrade</div> <nav> <ul> <li><a href="/">About</a></li> <li><a href="/">Portfolio</a></li> <li><a href="/">Downloads</a></li> <li><a href="index.html">Home</a></li> </ul> </nav> <div id="content"> Text </div> </body>

And CSS:

 html, body { background: #333333; font-family: "Segoe UI", "Lucida Grande", sans-serif; height: 100%; margin: 0; padding: 0; } #header { color: #b6b6b6; float: left; font-family: Megrim; font-size: 36px; margin: 18px 52px 18px 52px; text-shadow: 0 0 3px rgba(0, 18, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.5); text-transform: uppercase; } nav li a { color: white; display: block; float: right; font-size: 1.3em; list-style: none; padding: 24px 48px 24px 0; text-decoration: none; } #content { clear: both; background: #3e3e3e; box-shadow: 0 -2px 3px rgba(0,0,0,0.35), 0 -1px 0 rgba(255,255,255,0.3); min-height: 100%; }

Is there any way to fix this?

+4
source share
4 answers

Depending on what you are trying to achieve, this layout can be achieved in one of two ways.

First, if you don't need anything at the bottom of the page, you just need to remove min-height and background-color off #content and put background-color in the body . I would also slightly modify the structure of the HTML header to make it a little more semantically correct and easier to work with:

HTML

 <div id="header"> <h1>Davi Andrade</h1> <nav> <ul> <li><a href="/">About</a></li> <li><a href="/">Portfolio</a></li> <li><a href="/">Downloads</a></li> <li><a href="index.html">Home</a></li> </ul> </nav> </div> <div id="content"> .... </div>

CSS

 /* change original #header to h1 and add the following CSS */ #header { background: #333333; overflow: hidden; } /* remove back ground color from #content and add here */ html, body { .... background-color: #3e3e3e; .... }

Secondly, if you need a footer at the bottom of the page, you will need to make the changes above and then wrap the HTML inside the container element with min-height: 100% . You can then use position: absolute to place the footer element at the bottom of the container element. There are several other bits and parts that I explained in more detail at fooobar.com/questions/34491 / ....

With footer: http://jsfiddle.net/cNfWZ/1/

Without footer: http://jsfiddle.net/cNfWZ/

+4
source

Yes. Lose the min-height property.

0
source

Look at here:

Make a div to fill the height of the remaining screen

This is really not all that is possible using regular CSS and HTML.

If you want the background to be lighter than gray, I would suggest that you make the background of the body the same color, and then make the title and navigation darker gray. The content will look as if it fills the rest, but in reality it will not.

Edit:

Sorry, I should not use div and body element. With a table, you can achieve something like what you are going to do.

0
source

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

More articles:


All Articles