All geek questions in one place

CSS: How to have only 100% with fluid layout and border?

I am trying to understand the basics of CSS layout and have some problems with a page that is too tall when adding borders.

Here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <link rel="stylesheet" type="text/css" href="KKF_00005.css"> <title>KKF 5: Border coping</title> </head> <body> <div class="links_aussen"> <div class="innen">Rechts</div> </div> <div class="mitte_aussen"> <div class="innen">Mitte</div> </div> <div class="rechts_aussen"> <div class="innen">Links</div> </div> </body> </html>

I use the following stylesheet:

 @CHARSET "ISO-8859-1"; * { height: 100%; margin: 0; padding: 0; } html,body { background-color: grey; width: 100%; } .innen { border: 1px solid black; } .links_aussen { float: left; background-color: green; width: 33%; height: 100%; } .mitte_aussen { float: left; background-color: yellow; height: 100%; width: 34%; } .rechts_aussen { float: left; background-color: red; height: 100%; width: 33%; }

And here is jsFiddle

My problem is that this code gives me a nice 100% layout horizontally, but creates a vertical scrollbar. I would like to have scrollbars, but also see borders (so that overflow: hidden will not help me with this, I think) - checked in Chrome and Firefox.

So: How can I tell my small browser that it should remove 2 pixels from the height so that I have borders and scrollbars?

Thanks in advance for any ideas and answers Andre

+4
source share
4 answers

Here is the solution for using box-sizing: border-box . It also eliminates the need for a .inner div.

http://jsfiddle.net/mqchen/xHFvG/

EDIT: If anyone wonders why this works, take a look at the post of Joachim Johansson. Now back to this post. The box-sizing property simply overrides how the browser calculates the size of the elements. More on this here: https://developer.mozilla.org/en-US/docs/CSS/box-sizing

+5
source

This is because the default window model is a content container and works as follows:

From w3schools

The heights you set change the "Content" part. Therefore, if you have a height of 100% and the border is set to 1%, this will add up to 101%.

This is decided differently depending on what you are trying to do.

For example, you can set the box-sizing attribute: http://www.quirksmode.org/css/box.html so that the height attribute works differently.

It is impossible that life determined me a good solution right now (since relying on window size is not compatible), but it’s bad here, using absolute positioning: http://jsfiddle.net/XhfmR/

+3
source

Your problem is the boundaries:

Instead

 .innen { border: 1px solid black; }

http://jsfiddle.net/tt13/997zC/

Using

  .innen { border-left: 1px solid black; border-right: 1px solid black; }

http://jsfiddle.net/tt13/997zC/1/

When you write only border , it adds borders to all sides of the div. In your case, the lower and upper borders take an additional 1px, you get the result 2px higher in height. This is why you see the scroll bar.

And always use jsfiddle for such questions.

+1
source 
 .innen { border: 1px solid black; }

is your problem. It creates a vertical scroll bar. To solve this problem, use this code:

 .innen { border-left: 1px solid black; border-right: 1px solid black; }

http://jsfiddle.net/yrLtz/

Edit: Perhaps the best solution is box-sizing: border-box , as @mqchen suggested.

0
source

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

More articles:


All Articles