固定位置填滿分區

我有一個網頁，我希望所有的元素固定到位，以便整個頁面沒有滾動條。我有一個標題，一個菜單在左側，一個區域將出現一個情節，然後直接在情節下面應該是一個列表。固定位置填滿分區

標題和繪圖區域之間有一段距離，我無法擺脫。我已將margin和padding設置爲0.

此外，該圖應該佔據標題下方60％的空間和列表40％，但都不正確，並且這兩個元素都遠遠高於頁面底部在垂直。

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.float { 
 
    width: 100%; 
 
    background-color: blue; 
 
    padding-top: 60px; 
 
    display: flex; 
 
    display: -webkit-flex; 
 
} 
 
.main_title { 
 
    width: 70%; 
 
    height: 60px; 
 
    display: flex; 
 
    display: -webkit-flex; 
 
    flex-wrap: nowrap; 
 
    flex-flow: column; 
 
    justify-content: center; 
 
    background-color: red; 
 
} 
 
.clock { 
 
    width: 30%; 
 
    height: 60px; 
 
    background-color: green; 
 
} 
 
.header { 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    height: 60px; 
 
    position: fixed; 
 
    width: 100%; 
 
    background-color: red; 
 
    margin: 0; 
 
} 
 
.menu { 
 
    width: 130px; 
 
    flex: 0 0 130px; 
 
    background-color: yellow; 
 
    height: 100%; 
 
    position: fixed; 
 
} 
 
.column_main { 
 
    flex: 1; 
 
    background-color: purple; 
 
    padding-left: 130px; 
 
    float: right; 
 
} 
 
.plot-wrapper { 
 
    width: 100%; 
 
    background-color: brown; 
 
    height: 60%; 
 
} 
 
#list { 
 
    background-color: lightblue; 
 
    width: 100%; 
 
    height: 40%; 
 
    position: fixed; 
 
}

<body> 
 
    <div class="header"> 
 
    <div class="header"> 
 
     <div class="main_title">title</div> 
 
     <div class="clock">time</div> 
 
    </div> 
 
    </div> 
 
    <div class="float"> 
 
    <nav class="menu"> 
 
     <p>menu</p> 
 
    </nav> 
 
    <div class="column_main"> 
 
     <div class="plot-wrapper"> 
 
     <p>plot wrapper</p> 
 
     </div> 
 
     <div id="list"> 
 
     <p>list</p> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</body>

來源

2015-12-03 Eli Morris

「我有一個網頁，我想所有的固定在適當位置的元素這樣頁面就沒有滾動條了整個「。完全混淆。 – onetwo12

'plot-wrapper'裏面有'p：{display：block; -webkit-margin-before：1em; -webkit-margin-after：1em; -webkit-margin-start：0px; -webkit-margin-end：0px; }'set' margin：0' – onetwo12

關於高度，由於父容器'.float'沒有高度，因此'.plot-wrapper'的'height：60％'不起作用。 – abhishekkannojia

如果我理解你的權利，以下是這樣做的一個方式，不涉及使用flex。

在標題中，我使用浮動並排放置兩個元素。

然後，我使用絕對定位來創建.float面板，調整頂部偏移量以將頂邊正好設置在header的正下方，並通過將所有其他偏移量設置爲零來將其展開爲全寬和底部。

然後，我使用絕對定位將.menu置於左側，佔用塊的左側130px寬度，然後同時創建一個.column_main塊，以便佔用剩餘的空間。

在.column_main之內，我將.plot-wrapper和#list分別定義爲常規流入元素，並將高度分別設置爲60％和40％。我添加了overflow: auto以防止任何邊距（例如p元素）崩潰並創建不需要的空白。

html, body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.header { 
 
    height: 60px; 
 
    background-color: red; 
 
    overflow: auto; 
 
} 
 
.main_title { 
 
    float: left; 
 
    width: 70%; 
 
    height: 60px; 
 
    background-color: red; 
 
} 
 
.clock { 
 
    float: left; 
 
    width: 30%; 
 
    height: 60px; 
 
    background-color: green; 
 
} 
 
.float { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: 60px; 
 
    bottom: 0; 
 
} 
 
.menu { 
 
    background-color: yellow; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    width: 130px; 
 
} 
 
.column_main { 
 
    position: absolute; 
 
    left: 130px; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    background-color: purple; 
 
} 
 
.plot-wrapper { 
 
    overflow: auto; 
 
    background-color: brown; 
 
    height: 60%; 
 
} 
 
#list { 
 
    overflow: auto; 
 
    background-color: lightblue; 
 
    height: 40%; 
 
}

<div class="header"> 
 
    <div class="main_title">title</div> 
 
    <div class="clock">time</div> 
 
</div> 
 
<div class="float"> 
 
    <nav class="menu"> 
 
    <p>menu</p> 
 
    </nav> 
 
    <div class="column_main"> 
 
    <div class="plot-wrapper"> 
 
     <p>plot wrapper</p> 
 
    </div> 
 
    <div id="list"> 
 
     <p>list</p> 
 
    </div> 
 
    </div> 
 
</div>

來源

2015-12-03 02:34:43

是的！這正是我的意思。它看起來是一個很好的解決方案非常感謝！ –

非常歡迎您，請記住接受答案，將問題標記爲已回答。 Upvote也將不勝感激。歡迎來到SO！ –

網站將不會註冊我的upvote，但它看起來像當我得到一些業力點（或任何他們被稱爲在stackoverflow）。再次感謝。 –

我改變你的代碼了一點，但我在你的解釋感到困惑，所以我這樣做，如果我是不正確我很抱歉，但嘿，我試過了。：d

HTML：

<div id="page"> 
    <header class="main-hdr"> 
     <div> 
      <h1>Title</h1> 
     </div> 
     <div>00:00:00</div> 
    </header> 
    <main class="main-content"> 
     <nav> 
      <ul> 
       <li><a href="#">Menu</a></li> 
       <li><a href="#">Menu</a></li> 
       <li><a href="#">Menu</a></li> 
       <li><a href="#">Menu</a></li> 
       <li><a href="#">Menu</a></li> 
      </ul> 
     </nav> 
     <section> 
      <h2>Plot</h2> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. 
      </p> 
     </section> 
     <aside> 
      <h3>Lists</h3> 
      <ul> 
       <li>Item</li> 
       <li>Item</li> 
       <li>Item</li> 
       <li>Item</li> 
       <li>Item</li> 
      </ul> 
    </main> 
</div>

CSS：

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300); 

* { 
    margin: 0; 
    padding: 0; 
    font-family: 'Open Sans', 'DejaVu Sans', sans-serif; 
} 


body { 
    text-align: center; 
    background-color: #fff; 
    color: #000; 
    font-size: 100%; 
    overflow: hidden; /*prevent scrollbars*/ 
} 

header, main, section, aside, nav { 
    display: block; 
} 

#page, 
.main-hdr { 
    width: 100%; 
    clear: both; 
    margin: 0 auto; 
    overflow: hidden; 
} 

.main-hdr { 

    display: flex; 
} 

.main-hdr div { 
    float: left; 
} 

.main-hdr div:first-child { 
    background-color: #aa0b6b; 
    width: 80%; 
} 

.main-hdr div:last-child { 
    width: 20%; 
    background-color: #20aa5c; 
} 

.main-content { 
    clear: both; 
} 

.main-content nav { 
    float: left; 
    width: 20%; 
} 

.main-content section { 
    width: 60%; 
    float: left; 
} 

.main-content aside { 
    width: 20%; 
    float: left; 
}

結果：

EXAMPLE

來源

2015-12-03 01:22:45 Uniforlyff

謝謝你的嘗試，如果我感到困惑，我很抱歉。我希望列表直接位於圖的正下方 - 因此窗口左側的垂直菜單（從頁眉下方延伸到頁面底部）。然後，在所有未被標題或菜單佔據的空間中繪製一個圖表，然後直接在列表下方顯示一個列表（圖表和列表組合將從標題正下方直到頁面底部）。圖表和列表都會從窗口左側的菜單到右側的菜單水平放置。我不知道是否清除它。 –

這裏有一個plunker和下面的代碼段：

html, 
 
body { 
 
    box-sizing: border-box; 
 
    font: 400 16px/1.5'Palatino Linotype'; 
 
    width: 100vw; 
 
    height: 100vh; 
 
} 
 
*, 
 
*:before, 
 
*:after { 
 
    box-sizing: inherit; 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
} 
 
body { 
 
    color: #111; 
 
    background-color: lightblue; 
 
    font-variant: small-caps; 
 
    font-size: 1rem; 
 
} 
 
.shell { 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    overflow: hidden; 
 
} 
 
.core { 
 
    width: calc(100% - 130px); 
 
    height: calc(100% - 60px); 
 
    background-color: blue; 
 
    left: 130px; 
 
    top: 60px; 
 
    position: fixed; 
 
} 
 
.title { 
 
    width: 70%; 
 
    line-height: 1; 
 
    vertical-align: central; 
 
    background-color: red; 
 
    position: fixed; 
 
    top: 14px; 
 
} 
 
.clock { 
 
    width: 30%; 
 
    height: 60px; 
 
    background-color: lime; 
 
    position: fixed; 
 
    right: 0; 
 
    top: 0; 
 
} 
 
header { 
 
    height: 60px; 
 
    width: 100%; 
 
    background-color: red; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 11; 
 
    position: fixed; 
 
} 
 
.menu { 
 
    width: 130px; 
 
    background-color: yellow; 
 
    height: calc(100% - 60px); 
 
    top: 60px; 
 
    left: 0; 
 
    position: fixed; 
 
} 
 
.plot { 
 
    width: calc(100% - 130px); 
 
    background-color: brown; 
 
    height: calc(60% - 30px); 
 
    top: 60px; 
 
    left: 130px; 
 
    position: fixed; 
 
} 
 
#list { 
 
    background-color: lightblue; 
 
    width: calc(100% - 130px); 
 
    height: calc(40% - 30px); 
 
    bottom: 0; 
 
    left: 130px; 
 
    padding: 20px; 
 
    position: fixed; 
 
} 
 
#list dd { 
 
    text-indent: 20px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body> 
 
    <section class="shell"> 
 
    <header class="header"> 
 

 
     <h1 class="title">title</h1> 
 
     <h3 class="clock">time</h3> 
 

 
    </header> 
 

 
    <nav class="menu"> 
 
     <h3>Menu</h3> 
 
    </nav> 
 
    <main class="core"> 
 
     <section class="plot"> 
 
     <h2>plot wrapper</h2> 
 
     </section> 
 

 
     <dl id="list"> 
 
     <dt>List Section</dt> 
 
     <dd>List Item</dd> 
 
     <dd>List Item</dd> 
 
     <dd>List Item</dd> 
 
     <dd>List Item</dd> 
 
     <dd>List Item</dd> 
 
     </dl> 
 
    </main> 
 

 

 
    </section> 
 
</body> 
 

 
</html>

來源

2015-12-03 03:00:07 zer00ne

固定位置填滿分區

回答

相關問題