css div with the same dimension as the browser less 30 px width and height
I have and I want that div has the same dimensions as the width of the browser less 30px in height and width to give an idea to have a white border. Whenever these divs resize the browser will adjust accordingly. I did not use the border: 15px solid white because it will create scroll-bars and I do not want
I tried this but it creates also an scroll-bars.
<body>
<div id="background-wrapper">
<div id="main-wrapper">
<!-- <img src="bla bla" /> -->
</div>
</div>
</body>
#background-wrapper{
background-color:#FFF;
position:absolute;
width:100%;
height:100%;
background-color:#FFF;
}
#main-wra开发者_如何学Pythonpper{
background-color:#F00;
position:relative;
float:left;
width:100%;
height:100%;
top:15px;
left:13px;
}
Any Ideas??
Why not get rid of the #background-wrapper element and then do this instead?
#main-wrapper {
position: absolute;
left: 15px;
right: 15px;
top: 15px;
bottom: 15px;
}
An example can be found here.
You could try some padding on your inner div
<body>
<div id="background-wrapper">
<div id="main-wrapper">
<!-- <img src="bla bla" /> -->
</div>
</div>
</body>
#background-wrapper{
background-color:#FFF;
position:absolute;
width:100%;
height:100%;
background-color:#FFF;
}
#main-wrapper{
background-color:#F00;
position:relative;
float:left;
width:100%;
height:100%;
padding: 30px /*This shouldn't create scrollbars, but provide padding inside your divs*/
}
Try this:
body {
background-color: #fff;
}
#main-wrapper {
margin: 30px;
}
No need for background-wrapper.
加载中,请稍侯......
精彩评论