How to make my web page display in full in any browser window of any size
I have made a webpage and this is the code to the ma开发者_如何学Pythonin div.
#Div {
margin-left: 0px;
position:absolute;
margin-top: -1px;
display: inline;
float: left;
margin-bottom: 0;
background-color: #030;
width: 660px;
margin-left:-330px;
left:50%;
padding-top: 0px;
height: 440px;
}
Is there a css technique i can use to make sure the page occupies the whole page no matter the size of the computer screen the browser is on.
Why are you setting margin-left
twice? Why are you floating (and displaying inline) a div that you want to take up the whole screen? Setting a negative left margin will move your whole div to the left, and therefore cause it to not reach all the way to the right even when the width: 100%
.
Take away all margins. Do width:100%
. change display:inline
to display:block
. Take away the float. If you have to set this to position:absolute
, then be sure to specify: top: 0px; left: 0px
min-height: 100%; min-width: 100%;
and use a CSS Reset - http://meyerweb.com/eric/tools/css/reset/
You want to center your webpage, without beeing cut at the left on small screens?
Use following:
#outer{
text-align: center;
}
#inner{
margin:0 auto;
width: 660px;
text-align: left;
}
<div id="outer">
<div id="inner">
content
</div>
</div>
Perhaps you can take some inspiration from a CSS framework and strip out the bits that you need? http://cssgrid.net/
#container {
background: blue;
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
2border: 1px solid red;
}
<div id="container"></div>
精彩评论