Forum Moderators: not2easy
Thank you for any help or push to a right direction.
body {
border: 10px solid #000000;
}
Basically only the root element has the 100% height, but adding a border, or padding around html/body/wrapper makes it too high to fit the viewport.
Not going for a 100% height means the element collapses to fit the content vertically.
Now If I can exclude IE for now, I do have an easy way with absolute positioning.
Basically one can use an absolute positioned body with top/bottom/left/right set to 10px. and give the html a contrasting background color.
But if the body then overflows ... ouch.
So using some CSS3 (widely supported) overflow-y:scroll could come to the rescue. But overflow-y:scroll has a side effect you might not like: it'll always create a scrollbar even if it is not needed.
Now this works nicely in FF3, Safari and Opera.
To my surprise IE7 liked it too.
But for poor IE6, well ... IE7.js can safe the day.
<?xml version="1.0" encoding="ISO-8859-1"?>
<!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" xml:lang="en" lang="en">
<head>
<title>untitled</title>
<style type="text/css">
* {
padding:0;
margin:0;
}
html {
background-color: black;
}
#wrapper {
background-color: gray;
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
overflow-y:scroll; /* widely supported CSS3*/
}
</style>
<!--[if IE 6]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js"
type="text/javascript"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
replace me with lots of text and resize
the window to make it both fit and not
fit the screen.
</div>
</body>
</html>
It's not perfect, but maybe it'll inspire a better solution that's not adding html.
Alternatively, a solution would be to position:fixed place 4 elements to create the border and then use some margin/padding on the flow to prevent it from going there (basically faking the effect and adding superfluous stuff to the html).
Again IE6 will need help but it can be done and gives a nice effect, but it remains a shame that it need elements in the html.
<?xml version="1.0" encoding="ISO-8859-1"?>
<!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" xml:lang="en" lang="en">
<head>
<title>untitled</title>
<style type="text/css">
* {
padding:0;
margin:0;
}
body {
background-color: gray;
}
#wrapper {
padding: 10px
}
#shame1, #shame2, #shame3, #shame4 {
background-color: red;
position: fixed;
}
#shame1, #shame3 {
height: 10px;
width: 100%;
}
#shame2, #shame4 {
width: 10px;
height: 100%;
}
#shame1 {
top:0;
}
#shame3 {
bottom:0;
}
#shame2 {
left:0;
top:0;
}
#shame4 {
right:0;
top:0;
}
</style>
<!--[if IE 6]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js"
type="text/javascript"></script>
<style type="text/css">
#shame1, #shame3 {
line-height: 1px;
font-size: 1px;
}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
replace me with lots of text and resize
the window to make it both fit and not
fit the screen.
</div>
<div id="shame1"></div>
<div id="shame2"></div>
<div id="shame3"></div>
<div id="shame4"></div>
</body>
</html>
I'm wondering if it could be solved with the full CSS3 as it currently stand without adding things to the html.
How can I create a 10px border for top, bottom, left and right of a page which stays always there even when you resize the browser window and the border doesn't interact with the content inside the page nor create scroll bars
It is usual to do this with a wrapper div inside the body given wrapper divs are quite common. However, as webfoo suggested, it is possible using just a border on the body - although my recommendation is to force a scroll bar as users expect them and it avoids rounding errors that make the border look different widths on the right and bottom sides. Using a background on html plus padding, or margins on the body, are possible, but create their own challenges because of the rounding, plus firefox loses the bottom border and doesn't create scrollbars if the browser window is resized.
I have also assumed you want the border to be drawn around the "inside" of the viewport even if the content of the document does not fill the entire "screen", but also extend around the whole document should the content be higher than the viewport and require scrolling. Maybe you don't! If all of your documents are short, or all require scrolling, the example code can be simplified even more.
As a final note, if I am correct that you want the bottom border just "inside" the viewport, but still wrapping around the content if longer, this has similarities with techniques like "sticky footer" and "stretchy content" etc. One was solved here using css just a few weeks ago. They are not quite the same, but a search may provide some clues that can be adapted for other elements on your page.
Example code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>My title</title>
<style type="text/css">
html, body, * {
padding:0;
margin:0;
border:none;
}html {
height:100%;
width:100%;
/*background-color set to see affect of changes. Note one way of easing rounding differences is to set a colour the same as the border on body */
background-color:green;
}body {
border:10px solid red;
background-color:white;
/*auto avoids ie adding the border to width to and forcing a horizontal scrollbar*/
width:auto;
/*auto required for ff, winSafari and ie7 or will not extend the body to wrap around the content if it is higher than the viewport. (Test with height:100%)*/
height: auto;
min-height:98%!important; /*This will produce a scroll bar to avoid measuring discrepancies, especially in FF and winSafari. Note winSafari demands a greater min-height than firefox at default settings. !important makes sure the auto height is ignored when the content is short */
}p {
background-color:blue;
}</style>
<!--conditional comment required to send a height to ie 6, which does not understand min-height, and a different min-height to ie 7 to account for the box model -->
<!--[if lte IE 7 ]>
<style type="text/css">
body {height:96.6%;min-height:96.6%!important}
</style>
<![endif]--></head>
<body>
<p>My paragraph </p>
</body>
</html>
Swa66 your second code was most accurate of what I was looking for. It works flawlessly on Safari and FireFox. Need to figure out how to get previews of it on IE6 and 7 if it works on those too. Your other one showed an empty scroll bar inside the border on Safari which is a little bug. But the first one is exactly what I was looking for. Thank you very much. Need to study this more:)
Alt131 yours was perfect except the bottom border doesn't stay exactly the same size as the other ones. Thank you very much for your help though, your code taught me a lot too and it's nice to see different ways to create this.
