css div定位和溢出問題，難以理解

我有些困難，理解爲什麼我的一些DIV沒有擴展到我的「內容」DIV的高度。它只能是css/html。css div定位和溢出問題，難以理解

層次

- [+]包裝
---- [ - ]左
----（將包含導航欄）[ - ]右（只是用以中心爲中心的div，可能有內容）
---- [ - ] center（頁面中心包含的內容）
-------- [o] header（只會有小行文字）
------- - [O]含量（如果縱向溢出，應該擴大其他高度）
---- [ - ]頁腳（資源&接觸環節，應始終在底部）

CSS

*{ 
     font-family: Arial Black,Arial Bold,Gadget,sans-serif; 
     font-size: 12px; 
     font-style: normal; 
     font-variant: normal; 
     font-weight: 400;  
     border:0px; 
     margin:0px; 
     padding:0px; 
    } 
    .wrapper{ 
     position:absolute; 
     width:100%; 
     height:100%; 
     background-color:black; 
    } 
    .left{ 
     position:absolute; 
     left:0px; 
     width:220px; 
     height:100%; 

     background-color:red; 
    } 
    .right{ 
     position:absolute; 
     right:0px; 
     width:220px; 
     height:100%; 

     background-color:blue; 
    } 
    .center{ 
     position:absolute; 
     right:220px; 
     left:220px; 

     background-color:yellow; 
    } 
    #header{ 
     float:left; 
     height:40px; 
     width:100%; 
     background-color:silver; 
    } 
    #footer{ 
     position:absolute; 
     bottom:0px; 
     height:20px; 
     width:100%; 

     background-color:silver; 
    } 
    #content{ 
     float:left; 
     top:40px; 
     bottom:20px; 
     margin:20px; 

     background-color:orange; 
    }

HTML

<body> 
    <div class="wrapper"> 
     <div class="left"> 
     </div> 
     <div class="right"> 
     </div> 
     <div class="center"> 
      <div id="header"> 
      </div>   

      <div id="content"> 
      </div> 

     </div> 
     <div id="footer"> 
      </div> 
    </div> 
</body>

這裏是我的jfiddle：JFIDDLE

來源

2016-04-07 John Doe

任何使'.wrapper'絕對定位的理由？ – Nitesh

當我研究絕對值時，它說在包裝中使用相對值，在兒童中使用絕對值。但是當我將相對放在封套的CSS中時，整個頁面從窗口中消失。 –

設置.wrapper div的位置是：絕對的，高度100％;,所以只需要在他容器的高度，（這是絕對定位的元素是如何工作的）

的問題是，我想你過度使用絕對位置一點點，看到它的一個強大的工具，但佈局成分不是那麼好是，您可以使用在線的浮動基地佈局，或塊或彈性佈局

彎曲會像

.wrapper { display: flex; } .left { flex-grow: 1 } .right { flex-grow: 1 } .content { flex-grow: 3 }

，但你必須把頁腳出的包裝，或者你可以添加其他的孩子格狀

<div class="wrapper"> <div class="main"> <div class="left"></div> <div class="right"></div> <div class="center"></div> <div> <div id="footer"></div> </div>

現在只是柔性屬性添加到主，和柔性成長到兒童

記得口糧柔性的工作，上面的CSS意味着.contnet潛水將採取3倍的.lef寬度或.right格

即左側寬度爲20％，右側寬度爲20％，中心寬度寬度爲60％，

來源

2016-04-07 12:09:34

謝謝，我欣賞小費。我認爲使用職位是基於我閱讀的所有幫助主題的更受歡迎的方法。我今晚要研究flex方法。希望能解決這個問題。我似乎總是有div定位問題。 –

.row { 
    display: flex; /* equal height of the children */ 
} 

.col { 
    flex: 1; /* additionally, equal width */ 

    padding: 1em; 
    border: solid; 
}

<div class="row"> 
    <div class="col">Lorem ipsum dolor</div> 
    <div class="col">Lorem ipsum dolor sit amet</div> 
</div>

參考this link你會得到解決的，或者如果你不想使用CSS，然後去的JavaScript。請參考這個jQuery插件，爲此 - jquery-match-height

來源

2016-04-07 12:00:02

css div定位和溢出問題，難以理解

回答

相關問題