hanzala hanzala - 5 months ago 19
HTML Question

Extend DIV width to screen width

Especially at low screen resolution, the screen can have an horizontal scrollbar. I want to expand div length to end of the scrollbar. So, width of div may bigger than 100%.



#content{border:2px solid red}

<body>
<div id="content">Test</div>
<div id="wrap">
NoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapText
</div>
</body>





I want to expand the
content
width to screen width.

How can I do this?

Thanks

Answer

#content{border:2px solid red}
body {
display:table;
}
<body>
  <div id="content">Test</div>
  <div id="wrap">
NoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapText
  </div>
</body>

Comments