絕對完整的高度和底部邊距

我有兩個左列，而不是從文檔的頂部開始。

HTML：

<div id="site-logo">logo</div> 
<section id="left-column"> 
    <nav>nav</nav> 
</section> 
<header>header</header> 
<main id="main-section"> 
    <section id="second-left-column"> 
     <nav id="sub-nav">sub nav</nav> 
    </section> 
    <section id="content">content</section> 
</main>

CSS：

body { position: relative; } 

header { 
    background-color:red; 
    height: 50px; 
} 
#left-column { 
    position: absolute; 
    width: 150px; 
    background-color:black; 
    height: 100%; 
    min-height: 100%; 
    top:100px;  
    bottom: 0px; 
} 
#site-logo { 
    width: 150px; 
    height: 100px; 
    background-color:yellow; 
    position: absolute; 

} 
#second-left-column{ 
    width: 150px; 
    position: absolute; 
    height: 100%; 
    min-height: 100%; 
    background-color:grey; 
    top: 25px; 
} 
#main-section { 
    margin-left: 150px; 
    position: relative; 
    height: 100%; 
    min-height: 100%; 
} 
#content { 
    margin-left:150px; 
    background-color: blue; 
    min-height: 800px; 
}

There is the Fiddle

我想有兩個在文件的結尾結束列，hoefully在同一行比內容（藍色）

我該如何避免不同的保證金底？

如果需要，我可以將標誌（黃色）放在色譜柱內。我們必須保持佈局

來源

2015-04-20 goto

你爲什麼不使用浮動？你的選擇還是其他原因？結果是一團糟。我可以嘗試提供一個替代方案，但我不確定你想要它看起來像什麼 –

我需要列有100％的高度可能，我認爲這是不可能的浮動屬性 – goto

你可以做浮動並給它'身高：100％' –

內的白色怪空間嘗試添加一個包裹格爲所有的div並將其設置爲overflow:hidden，看到https://jsfiddle.net/jm4j9h04/4/

<div style="overflow:hidden;">   
<div id="site-logo">logo</div> 
     <section id="left-column"> 
      <nav> 
       nav 
      </nav> 
     </section> 
     <header> 
      header 
     </header> 
     <section id="main-section"> 

      <section id="second-left-column"> 
       <nav id="sub-nav"> 
        sub nav 
       </nav> 
      </section> 
      <section id="content"> 
       content 
      </section> 

     </section> 
</div> 

body { position: relative;} 

header { 
    background-color:red; 
    height: 50px; 
} 
#left-column { 
    position: absolute; 
    width: 150px; 
    background-color:black; 
    top:100px;  
    bottom: 0px; 
} 
#site-logo { 
    width: 150px; 
    height: 100px; 
    background-color:yellow; 
    position: absolute; 

} 
#second-left-column{ 
    width: 150px; 
    position: absolute; 
    height: 100%; 
    min-height: 100%; 
    background-color:grey; 
    top: 65px; 
} 
#main-section { 
    margin-left: 150px; 
    position: relative; 
    height: 100%; 
    min-height: 100%; 
} 
#content { 

    margin-left:150px; 

    background-color: blue; 
    min-height: 800px; 

}

來源

2015-04-20 21:35:57 imnancysun

絕對完整的高度和底部邊距

回答

相關問題