Skip to content Skip to sidebar Skip to footer
Home / Css / Html

Cannot Make Div Width 100% With Scrollbar

Post a Comment
I have a page with a DIV and a TABLE. The DIV is my header and I want it to be 100% width even when horizontal scroll-bar displayed. For some reason it takes only 100% of visible w

Solution 1:

There is no way (perfectly dynamically--without fixing any widths--and with pure CSS--no JavaScript) to get a block-level element to inherit the width of a sibling block-level element via a block-level parent element.

The workaround is to put display: inline-block on the parent element, since an inline-block calculates its width property from its widest child.

In your case, don't put display: inline-block on the body element. I would suggest wrapping your 100% div and table elements in another wrapper element, thus:

<!DOCTYPE html><htmllang="en"><body><divclass="wrapper"style="display: inline-block; min-width: 100%;"><divstyle="background-color:yellow;">100% DIV</div><tablestyle="width:100%; background-color:orange;"><thead><tr><thstyle="padding-left:20px; padding-right:20px;">Very_Long_Header_1</th><thstyle="padding-left:20px; padding-right:20px;">Very_Long_Header_2</th><thstyle="padding-left:20px; padding-right:20px;">Very_Long_Header_3</th></tr></thead></table></div></body></html>

Also, putting min-width: 100% on the wrapper element will make it mimic an element with display: block on larger screen sizes.

Solution 2:

Actually table tag is being overflowed, so try to give 100% to its parent and to the div as well. If it's not working please provide me a jsfiddle url

Post a Comment for "Cannot Make Div Width 100% With Scrollbar"