沒有重疊，但在調整瀏覽器大小時堆疊div
[英]no overlapping but stacking divs on browser resizing
問題描述
4個div應該相互堆疊，並且它們不應該重疊！
- 頭應該像4.footer寬度100％
- 菜單應與1.Head和4.Footer堆疊在一起。
- 內容應位於頁面的中心位置，並在瀏覽器上調整大小3.內容應與其他div堆疊且不重疊
這是解決問題的圖片的鏈接：
https://docs.google.com/file/d/0B5Ki_dh4A-VJd2VNZ1o5b0RzQmc/edit?usp=sharing
這里的鏈接應該是怎樣的：
https://docs.google.com/file/d/0B5Ki_dh4A-VJWllueWtwX0JSTFE/edit?usp=sharing
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#headr{
height: 100px;
width: 100%;
background-color: #33ff33;
top: 0;
left: 0;
right: 0;
position: fixed;
border: 1px #000 solid;
}
#menu{
height: 100%;
width: 150px;
background-color: #ccff00;
left: 0;
top: 0;
position: fixed;
border: 1px #000 solid;
}
#content{
background: rgba(225, 225, 225, 0.5);
border: 1px #000 solid;
height: 600px;
width: 800px;
margin-left: -400px;
margin-top: -300px;
left: 50%;
top: 50%;
position: fixed;
}
#footer{
height: 35px;
width: 100%;
background-color: #ff3300;
bottom: 0;
left: 0;
right: 0;
position: fixed;
border: 1px #000 solid;
}
</style>
</head>
<body>
<div id="headr"><p style="text-align: center;"> 1. Head</p></div>
<div id="menu"><p style="text-align: center;"> 2. Menu</p></div>
<div id="content"><p style="text-align: center;"> 3. Content</p></div>
<div id="footer"><p style="text-align: center;"> 4. Footer</p></div>
</body>
1 個解決方案
解決方案1
0 已采納 2013-10-21 16:38:14
嗨，請查看此鏈接中的代碼http://jsfiddle.net/9gPMR/99/
It's an option using display:table and table-cell to fit on the window.
讓我知道關於此的任何問題或建議。
調整瀏覽器大小時堆疊Divs
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.