沒有重疊，但在瀏覽器調整大小的堆棧div

4個div應該堆疊在一起，它們不應該重疊！沒有重疊，但在瀏覽器調整大小的堆棧div

頭應該像4.footer寬度100％
菜單應與1.Head & 4.Footer疊加。
內容應在網頁和瀏覽器重新大小居中的3.Content應與其他分區的堆棧，不得重複

這裏到visulized問題圖片的鏈接：
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>

來源

2013-10-21 larson

你能鏈接一個圖片與你想要的正確的可視化？ – DaniP

這裏的鏈接： https://docs.google.com/file/d/0B5Ki_dh4A-VJWllueWtwX0JSTFE/edit?usp=sharing – larson

你好，請檢查代碼在這個環節http://jsfiddle.net/9gPMR/99/

It's an option using display:table and table-cell to fit on the window.

讓我知道這方面有任何問題或建議。

來源

2013-10-21 16:38:14 DaniP

謝謝你，我會試試看！到目前爲止，它似乎是解決方案:) – larson

工作，再次感謝解決方案！ :) – larson

沒有重疊，但在瀏覽器調整大小的堆棧div

回答

相關問題