1. 首頁
  2. 問答
  3. CSS元素和定位

CSS元素和定位

2017-09-27 102 views
-3

我想正確定位一些元素，但他們似乎剪輯/互相干擾，我不知道如何解決這個問題。CSS元素和定位

我想要一個固定位置的標頭頂部&底部有一箇中心元素，不會與他們剪輯。在中心內部，我想要一個左側和右側邊欄，它也不會夾在中間。

定位&大小不應該是絕對的。

頂部/底部作爲頁眉/頁腳只有這些應該是固定的。

隨着我的意思是，如果我改變我的瀏覽器的寬度。例如內容應「調整」

任何想法或暗示就如何實現這一目標？

|--------------------------------| 
|  Top (fixed header)  | 
|--------------------------------| 
|------| Center/content |------| 
|------|     |------| 
|------|  ^  |------| 
|------|   |  |------| 
| Left | <--stretch--> | Right| 
|------|   |  |------| 
|------|   v  |------| 
|------|     |------| 
|--------------------------------| 
|  Bottom(fixed footer)  | 
|--------------------------------|

這是我現在有，頁眉頁腳&被corretly的位置，但他們交鋒與我的其他元素...

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0 auto; 
 
} 
 

 
body { 
 
    color: #fff; 
 
    font-family: Verdana, Geneva, sans-serif; 
 
    text-shadow: 1px 1px black; 
 
} 
 

 
.page { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: #fff; 
 
} 
 

 
.header { 
 
    position: fixed; 
 
    width: 100%; 
 
    top: 0; 
 
    background: #ddd; 
 
} 
 

 
.footer { 
 
    position: fixed; 
 
    float: bottom; 
 
    bottom: 0; 
 
    background: #aaa; 
 
} 
 

 
.left { 
 
    width: 20%; 
 
    height: 100; 
 
    float: left; 
 
    background: #ccc; 
 
} 
 

 
.middle { 
 
    width: 60%; 
 
    float: left; 
 
    display: block; 
 
    background: #ddd; 
 
} 
 

 
.right { 
 
    width: 20%; 
 
    float: right; 
 
    background: #bbb; 
 
}
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="css/style.css"> 
 
    <title>Titel</title> 
 
</head> 
 

 
<body> 
 
    <div class="page"> 
 
    <div class="header"> 
 
     <p>test2</p> 
 
    </div> 
 
    <div class="center"> 
 
     <div class="left"> 
 
     <p>test2</p> 
 
     </div> 
 
     <p>test2</p> 
 
     <div class="right"> 
 
     <p>test2</p> 
 
     </div> 
 
    </div> 
 
    <div class="footer"> 
 
     <p>test</p> 
 
    </div> 
 
    </page> 
 
</body> 
 

 
</html>

來源

2017-09-27 Dinh

+3

你能告訴我們你的html嗎？ –

+0

如果你已經在使用'position：fixed'，你爲什麼要特別想要「定位和大小不應該是絕對的」 –

+0

編輯我的文章是更多的指定@WilliamIsted並添加我的HTML – Dinh

回答

0

你需要設置你的左邊和右邊欄屏幕的100％的高度，我還沒有在代碼中看到了這一點。 其次，因爲您正在使用固定位置爲頁眉和頁腳，但不是爲您的左右欄所以div的干擾問題是常見的。

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0 auto; 
 
} 
 

 
body { 
 
    color: #fff; 
 
    font-family: Verdana, Geneva, sans-serif; 
 
    text-shadow: 1px 1px black; 
 
} 
 

 
.page { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: #fff; 
 
} 
 

 
.header { 
 
    position: fixed; 
 
    width: 100%; 
 
    top: 0; 
 
    background: Red; 
 
    float: left; 
 
} 
 

 
.footer { 
 
    position: fixed; 
 
    float: bottom; 
 
    bottom: 0; 
 
    background: Red; 
 
    width: 100%; 
 
} 
 

 
.left { 
 
    position: fixed; 
 
    width: 10%; 
 
    height: 100vh; 
 
    float: left; 
 
    background: #ccc; 
 
    margin-top: 35px; 
 
} 
 

 
.middle { 
 
    width: 60%; 
 
    float: left; 
 
    display: block; 
 
    background: Blue; 
 
} 
 

 
.right { 
 
    position: fixed; 
 
    width: 10%; 
 
    height: 100vh; 
 
    background: #bbb; 
 
    right: 0px; 
 
}
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="css/style.css"> 
 
    <title>Titel</title> 
 
    
 
<style type="text/css"> 
 
    
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div class="page"> 
 
    <div class="header"> 
 
     <p>test2</p> 
 
     </div> 
 
    <div class="center"> 
 
     <div class="left"> 
 
     <p>Left</p> 
 
     </div> 
 
     <p>test2</p> 
 
     <div class="right"> 
 
     <p>test2</p> 
 
     </div> 
 
    </div> 
 
    <div class="footer"> 
 
     <p>test</p> 
 
     </div> 
 
    </div> 
 
    </body></html>

來源

2017-09-27 09:46:15

+0

非常感謝。我編輯了左右欄不固定，現在它工作！ 你知道我的問題爲什麼顯示-1嗎？我是這個論壇的新手！ – Dinh

+0

是的，可能是因爲這種類型的問題已經在stackoverflow的某個地方問過（不完全相同但相關的80％相關） –

0

我想你在skiped你的東西html文件。你可能應該把你的中間div放在那裏。

如果你想在頂部和底部的酒吧是固定的，其餘用滾動條來移動，你應該做到以下幾點：

<div class="page"> 
    <div class="header"> 
     <p>header</p> 
    </div> 
    <div class="center"> 
     <div class="left"> 
      <p>left</p> 
     </div> 
     <div class="middle"> 
      <p>middle</p> 
     </div> 
     <div class="right"> 
      <p>right</p> 
     </div> 
    </div> 
    <div class="footer"> 
     <p>footer</p> 
    </div> 
</div>

我加了邊框的頂部和底部面板所以你可以看到他們覆蓋的區域以及它們背後的內容。

.header { 
    position: fixed; 
    width: 100%; 
    top: 0; 
    /*background: #ddd;*/ 
    border: 1px dashed #000; 
} 

.footer { 
    position: fixed; 
    width: 100%; 
    /*float: bottom;*/ 
    bottom: 0; 
    /*background: #aaa;*/ 
    border: 1px dashed #000; 
}

而且你的左邊，右邊和中間的部分應該是直列塊，我相信：

.left { 
    width: 20%; 
    /*height: 100;*/ 
    display: inline-block; 
    float: left; 
    background: #ccc; 
} 

.middle { 
    width: 60%; 
    float: left; 
    display: inline-block; 
    background: #ddd; 
} 

.right { 
    width: 20%; 
    display: inline-block; 
    float: right; 
    background: #bbb; 
}

你可能想在你的中心區域的頂部添加一些填充，使頂酒吧不包括中央面板：

.center 
{ 
    padding-top: 60px; 
}

來源

2017-09-27 09:42:39

0

嘗試此，

[演示] https://jsfiddle.net/RRakeshraj/dk4mezgb/1/

CODE

<style> 
*{ 
    margin:0; 
    padding:0; 
} 
body{ 
    text-align:center; 
} 
.header-wrap{ 
     height:55px; 
     background:gray; 
     width:100%; 
     position:fixed; 
     top:0; 
} 
.body-wrapper{ 
    width: 70%; 
    margin: 55px auto; 
    min-height: 800px; 
    background:#eee; 
} 
.left-panel,.right-panel{ 
    min-height:557px; 
    background: rgba(104, 241, 104, 0.68); 
    width:15%; 
    position:fixed; 
} 
.left-panel{ 
    top:55px; 
    left:0; 
} 
.right-panel{ 
    top:55px; 
    right:0; 
} 
.footer-wrap{ 
     height:50px; 
     background:gray; 
     width:100%; 
     position:fixed; 
     bottom:0; 
} 
</style>

HTML

<div class="page-wrapper"> 
     <div class="header-wrap"> 
      <h3><!--Header--></h3> 
     </div> 
       <div class="left-panel"><h4><!--Left Panel--></h4></div> 
         <div class="body-wrapper"> 
          <div class="content-panel"><h1><!--Content--></h1></div> 
         </div> 
       <div class="right-panel"><h4><!--Right panel--></h4></div> 
     <div class="footer-wrap"> 
      <h3><!--Footer--></h3> 
     </div> 
</div>

來源

2017-09-27 10:01:46

相關問題

 相關問題