'Stretching' a div to the edge of a browser
I have an absolutely positioned header with background image. I would like both divs (also with background image) "stretch" from my header to the left and right edges of the users browser without needing a开发者_Go百科 scrollbar. How could I do this? Thanks!
Use width: 100%; and set the position to left: 0px;.
Check out: http://jsfiddle.net/joshcomley/ma26B/
THis is normally done with width:100% on CSS. I mean, browser nuances notwithstanding.
See normally a HTML page have the margins set to 5px or something else. But if you want your div element to be stretched up to the both edges do this --
<html>
<head>
<style>
body { margin: 0px 0px 0px 0px; background: #555; }
div.element { width: 100%; display: block; background: #000; color: #fff; padding: 5px 5px;}
</style>
</head>
<body>
<div class="element">Stretched to the both edges of you HTML page!</div>
</body>
</html>
That's all just copy and past the above code in your HTML page and execute and see the magic!
I hope this would help!
加载中,请稍侯......
精彩评论