让一个div增长，基于浏览器窗口大小

我想提出一个非常简单的HTML页面萎缩，想知道怎么做了以下两件事情对我的网页：让一个div增长，基于浏览器窗口大小

我有一个div容器并希望将容器div放在页面的中心。
当我调整窗口大小时，容器div将会增大和缩小。

我写了附加的代码，但容器总是粘在左边，当我调整窗口大小时它不会改变大小。

<title>Demo</title> 
<head>This is a demo</head> 
<style> 
#nav 
{ 
background-color: red; 
float: left; 
width: 200px; 
position:relative; 

} 

#detail 
{ 
background-color: green; 
float : right; 
width: 800px; 
position:relative; 
} 

div.testDetail 
{ 
margin-top:10px; 
margin-left:20px; 
margin-right:20px; 
margin-bottom:10px; 
} 

#container 
{ 
width:1000px; 
position:relative; 
} 
</style> 

<hr> 
<body> 
<div id="container"> 
<div id="nav"> 
    <ul>Tests</ul> 
</div> 
<div id="detail"> 
    <div class="testDetail"> 
     <image style="float:right;margin:5px;" src="test1.jpg" width="50px" height="50px"/> 
     <image style="float:right;margin:5px;" src="test2.jpg" width="50px" height="50px"/> 
     <image style="float:right;margin:5px;" src="test3.jpg" width="50px" height="50px"/> 
     <image style="float:right;margin:5px;" src="test4.jpg" width="50px" height="50px"/> 
     <h3>Title</h3> 
     <p>Testing</p> 
    </div> 
    <hr> 
</div> 
</div> 
<body>

我在这里错过了什么吗？任何帮助将不胜感激！

谢谢。

来源

2012-12-19 Kintarō

使用％大小，而不是PX大小，IE宽度：80％;或 – Darren

或更好， t漂浮它 – Shmiddty

<div id="my-div"> 
    ...content goes here 
</div>

CSS

#my-div{ 
    //For center align 
    margin: 0 auto; 
    // For grow & shrink as per screen size change values as per your requirements 
    width: 80%; 
    height: 50%; 
}

来源

2012-12-19 19:27:43

谢谢！这就是我需要的！:) –

我可以做'

'吗？ –

当然，为什么不呢？或者我错过了什么？ –

居中的对象，尤其是<div>的最好方法，是用下面的CSS：

margin-left: auto; 
margin-right: auto;

无固定余量，该对象将被居中。

对于调整大小，使页面大小相对（例如40％）而不是绝对（例如400px）。

来源

2012-12-19 19:27:09 MattDavBen

谢谢！它的工作原理 –

马特的CSS做水平居中的速记方法是

margin: 0 auto;

的0将决定顶部和底部边缘的和自动的左侧和右侧利润率。如果你想在上面/下面有一个边距，你可以改变0为任何你想要的（即margin: 20px auto;。

来源

2013-12-04 20:46:15 LLong

让一个div增长，基于浏览器窗口大小

回答

相关问题