开发者

HTML/CSS: Probleme with full width

开发者 https://www.devze.com 2023-04-01 00:25 出处:网络
I\'ve created this test-page: http://uploads.dennismadsen.com/width.html <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\

I've created this test-page: http://uploads.dennismadsen.com/width.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="da-DK">
<head>
    <title></titl开发者_如何转开发e>
</head>
<body style="background-color:#e0e0e0;">

    <div style="width:1500px;background-color:#ff0000;">Container width a width of 1500px</div>

  <div style="width:100%;background-color:#000;height:100px;"></div>
</body>
</html>

The red div is 1500px and the black to 100%.

When the browser window is smaller than 1500px, for instance 1000px, the black box will only be as width as the window. I would like it to fill as much as the above content.

Please note that the red box has a dynamic width. Therefore I cannot set a min-width=1500px etc. on the black box.


All you have to do is wrap the black div with the red one:

<body style="background-color:#e0e0e0;">

    <div style="width:1500px;background-color:#ff0000;">
        Container width a width of 1500px<!--this is where you closed your div-->
             <div style="width:100%;background-color:#000;height:100px;">
             </div>
    </div><!--this is where you should close it to make it work-->
</body>


To achieve such a thing, you need an absolute container.

A markup that will work is for example

<div style="position:absolute">
   <div style="width:1500px;background-color:#ff0000;">Container width a width of 1500px</div>
   <div style="width:100%;background-color:#000;height:100px;"></div>
</div>

EDIT: you can also put the absolute on the body if needed.


Put them both in another div. Then that div will be pushed to the width of whatever is in it (the red div) and something with a width of 100% will match it

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号