CSS: How to define a centered div with endless vertical borders and an initial height of 100%?
First question on SOF, please be gentle if this may be a stupid question. :) Haven't found a solution, neither here nor on the web.
I got some trouble with CSS. I pasted my code at the end of this post but first Ill explain what I'm trying to accomplish:
I want to build a centered fixed-width content area with endless vertical graphical borders to the left and right.
This is what I tried:
I created a #content div with a .wrapper div inside. Standard procedure to center a div Id say. Gave the #content the background property for the left border and the .wrapper div the right background. #content works fine: endless left border. But .wrapper stays the same height as its content. So if there is less content then the browser-height the border won't be endless.
If I set the content heights to 100% the borders show till the bottom of the page, but if the content is higher then the browser height and I scroll down the borders don't continue.
I inserted another div between #content and .wrapper: #contentbr and gave that div the same propertys as #content but with the right border graphic: Won't work, the height stays the same as the content of the wrapper.
Tried some more minor tweaks but neither worked out the way I want it.
Sad thing is: Nr. 2 works fine if I set the background property of #content to this: _background: url(img/content_left.png) top left repeat-y, url(img/content_left.png) top right repeat-y;_
Sadly the IE doesn't know CSS 3 so this is no solution as I can't ignore the IE.. :(
So im hoping for some help of you guys. Someone has to know how to do this magic.
Important notice on my HTML & CSS example: I replaced the background-properties with border-properties. In reality the left and right borders need to be two different images and use the commented backround-properties!
HTML & CSS:
<!doctype html>
<html>
<head>
<!-- <link rel="stylesheet" type="text/css" href="css/style.css"> -->
<style type="text/css">
html, body { height: 100%; }
#content
{
margin: 0 auto;
width: 950px;
/* this is the real deal: */
/* background: url("img/content_left.png") top left repeat-y; */
/* this is just for the example */
border-left: 1px solid black;
height: auto !important;
height: 100%; /* IE 6 Workaround */
min-height: 100%;
}
#content .wrapper
{
/* this is the real deal: */
/* background: url("img/content_right.png") top right repeat-y; */
/* this i开发者_JS百科s just for the example */
border-right: 1px solid black;
height: auto !important;
height: 100%; /* IE 6 Workaround */
min-height: 100%;
padding: 0px 70px;
}
</style>
</head>
<body>
<div id="content">
<div class="wrapper">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed malesuada, lorem ut lobortis congue, ligula risus condimentum enim,
vel ornare mi elit et purus. Duis justo libero, posuere nec ullamcorper nec, tempus nec augue. Maecenas rhoncus, sapien a dapibus
accumsan, nisl mi gravida arcu, id congue neque nisi vitae lacus. Morbi dapibus mollis tempor. Praesent tortor ipsum, rhoncus in
rhoncus sit amet, luctus nec nibh. Donec enim massa, fermentum et consectetur et, iaculis nec tortor. Mauris massa elit, pellentesque
id vestibulum in, vehicula nec elit. In congue purus vitae mauris adipiscing a sollicitudin dolor consectetur. In lacus lectus,
auctor nec facilisis non, tempus ut neque. Sed id elit vel dui porta condimentum vitae ac lorem. Nam suscipit elit ac est sollicitudin
sed faucibus tellus aliquam. Sed quis libero odio, pellentesque fermentum odio. Aliquam hendrerit dignissim sapien a vestibulum.
Phasellus aliquam pretium erat eu feugiat. Quisque enim arcu, sagittis at venenatis quis, auctor vitae diam. Donec sed arcu sapien.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla eget lacus id enim pulvinar ullamcorper.
</p>
</div>
</div>
</body>
</html>
I removed the margin and padding from all elements to prevent the gap between document edge and border.
* { margin: 0; padding: 0; }
To use the 100% height on the #wrapper as well as the #content div, use this:"
#content { position: relative }
#wrapper { position: absolute }
This is what I get:
http://manson.revora.net/test.html
The min-height hack, as far as I know requires that you put the properties in the following order:
min-height: 100%; height: auto !important; height: 100%;
Maybe I'm wrong, but I was certain that was the only way around it.
If you've got a 100% height div in th center of the page why don't you create a repeating background that you can apply to the body, or the outer-most container that will repeat to the maximum size of the box possible?
Or, just use:
border: solid #000; border-width: 0 1px;
on your outer div
Changed the layout a bit.
From .wrapper I removed all height information.
From #content I removed the height: auto !important; and outsourced the height: 100%; to
html #content { height: 100%; }
Just below #content and .wrapper
Now it works the way it should (even with graphical borders). Inital height of 100% and continuing borders if content exceeds window height:
html,
body {
height: 100%;
}
#content {
margin: 0 auto;
width: 950px;
/* this is the real deal: */
/* background: url("img/content_left.png") top left repeat-y; */
/* this is just for the example */
border-left: 1px solid black;
min-height: 100%;
}
#content .wrapper {
/* this is the real deal: */
/* background: url("img/content_right.png") top right repeat-y; */
/* this is just for the example */
border-right: 1px solid black;
padding: 0px 70px;
}
* html #content {
height: 100%;
}<div id="content">
<div class="wrapper">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed malesuada, lorem ut lobortis congue, ligula risus condimentum enim, vel ornare mi elit et purus. Duis justo libero, posuere nec ullamcorper nec, tempus nec augue. Maecenas rhoncus, sapien a
dapibus accumsan, nisl mi gravida arcu, id congue neque nisi vitae lacus. Morbi dapibus mollis tempor. Praesent tortor ipsum, rhoncus in rhoncus sit amet, luctus nec nibh. Donec enim massa, fermentum et consectetur et, iaculis nec tortor. Mauris
massa elit, pellentesque id vestibulum in, vehicula nec elit. In congue purus vitae mauris adipiscing a sollicitudin dolor consectetur. In lacus lectus, auctor nec facilisis non, tempus ut neque. Sed id elit vel dui porta condimentum vitae ac lorem.
Nam suscipit elit ac est sollicitudin sed faucibus tellus aliquam. Sed quis libero odio, pellentesque fermentum odio. Aliquam hendrerit dignissim sapien a vestibulum. Phasellus aliquam pretium erat eu feugiat. Quisque enim arcu, sagittis at venenatis
quis, auctor vitae diam. Donec sed arcu sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla eget lacus id enim pulvinar ullamcorper.
</p>
</div>
</div>
加载中,请稍侯......
精彩评论