All geek questions in one place

CSS div children are the same and larger than the page size

Each is my first post, so I hope that everything is correct.

I ran into a problem when I have child divs that should be the same width. #content may be larger than the browser window (hence 3000px , but will not always be larger than the browser window). Currently, #content displayed correctly, and I can use the scroll bar to view the entire #content , but #messages and #menu cropped to the width of the browser window.

I tried using width: inherit and several other options, but they did not work. Does anyone else have a working solution?

I created JSFiddle to make life easier http://jsfiddle.net/Ks665/

I added a screenshot of the prospectus:

enter image description here

Red and green should be as long as the blue div.

HTML:

 <html> <head> <link rel="stylesheet" href="style.css" media="screen"/> </head> <body> <div id="messages">test</div> <div id="menu">test</div> <div id="content">test</div> </body> <html>

CSS

 @import url('reset.css'); body { min-width: 990px; } #messages { height: 100px; background-color: red; } #menu { height: 100px; background-color: green; } #content { background-color: blue; height: 250px; width: 3000px; }
+4
source share
1 answer

You can try wrapping them inside another DIV and specify the width there; child divs will automatically fill up to the width of the parent:

 <div id="container"> <div id="messages">test</div> <div id="menu">test</div> <div id="content">test</div> </div>

And then apply the width to the DIV container instead of "content":

 #container { width: 3000px; }

The reason it doesn't work in your example is because the DIVs are children of the body tag, which has a minimum width but nothing is explicitly defined, as shown above.

+1
source

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

More articles:


All Articles