最大高度左/右列

-2

我有一個問題，我希望有人能幫助我...... 我已經想離開警告說，我是一個初學者，誰寬容我:)最大高度左/右列

目前人我的HTML/CSS文件看起來像這樣：

，我不知道它是什麼樣子的：

，你可以看到，在「內容」的內容後，超過了「左」和「正確」，「內容」佔據整個空間

我試圖使「左」和「右」總是佔據高度的100％，無論是「內容」

我的CSS代碼的大小：

#left { 
    line-height:30px; 
    background-color:#0c0c0c; 
    color:white; 
    height:30cm; 
    width:200px; 
    float:left; 
    margin-top: 20px; 
    padding:5px; 
} 

#right { 
    line-height:30px; 
    background-color:#0c0c0c; 
    color:white; 
    height:1200px; 
    width:200px; 
    float:right; 
    margin-top: 20px; 
    padding:5px; 
} 

#content { 
    background-color:#0c0c0c; 
    width:150px; 
    float:left; 
    margin-top: 10px; 
    margin-bottom: 10px; 
    padding:10px;   
}

我對不起球員，顯然我的HTML代碼沒有出現話題-.-「，我就下，我使用的是什麼確切的例子：

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

</head> 
<body style="background-color:#0c0c0c"> 

<div id="header"> 
<a href="#link"> 
<img src="#imagelink" alt="some_text"> 
</a> 
</div> 

<ul> 
    <li><a href="#home">Início</a></li> 
    <li><a href="#news">S</a></li> 
    <li><a href="#contact">Relatar erros</a></li> 
    <li><a href="#contact">Guia do site</a></li> 
    <ul style="float:right;list-style-type:none;"> 
    <li><a href="#contact">Doar </a></li> 
    <li><a href="#about">Sobre</a></li> 
    <li><a href="#login">Contato</a></li> 
    </ul> 
</ul> 

<!-- LEFT --> 
<div id="esquerda"> 
<a href="#link"> 
<img src="#imagelink" alt="Banner"> 
</a> 
<p>__________________________</p> 
<br> 
<a href="#link"> 
<img src="#imagelink" alt="banner"> 
</a> 
</div> 

<!-- right --> 
<div id="direita"> 
<a href="#link"> 
<img src="#imagelink" alt="Banner"> 
</a> 
<p>__________________________</p> 
<br> 
<a href="#link"> 
<img src="#imagelink" alt="banner"> 
</a> 

</div> 
<!-- CONTENT --> 
<a href="#"> 
<div id="section"> 
<div class="imgOverlay" style="background-image: url(); height: 200px; width: 150px;"> 
<span class="tipo">DUB</span> 
<span class="qualidade">HD</span> 
</div></a> 

</div> 

<div class="paginas"> 
<span class="pages">1 de 1</span> 
<a class="primeira" href="#link">«</a> 
<a class="link pagina anterior" rel="prev" href="#link">&lt;</a> 
<span class="extend">...</span> 
<a class="page anterior" href="#link">1</a> 
<a class="page anterior" href="#link">2</a> 
<span class="atual">3</span> 
<a class="page proxima" href="#link">4</a> 
<a class="page proxima" href="#link">5</a> 
<span class="extend">...</span> 
<a class="link proxima pagina" rel="next" href="#link">&gt;</a> 
<a class="ultima" href="#link">Última »</a></div> 

<!-- FOOTER --> 
<div id="footer"> 
Copyright© <a style="color:#990000;" href="#"></a><br> 
2015-2016 
<p style="color:#4d0000;"></p> 
</div></body></html>

感謝你的答案，但在另一個解決我的問題方式，我選擇不使用兩列，並完全重新編寫我的HTML/CSS。

來源

2015-12-13 Matheus

請分享您的HTML代碼。 –

你想要哪一個？ – Tony

'目前我的html/css文件看起來像這樣'它在哪裏？ –

也許你應該給內容的特定的高度和overflow: hidden因此頁腳是你希望它是。

不要忘記

clear: both在頁腳

來源

2015-12-13 14:21:58

我可以爲你提供一個簡單的例子。

* {margin: 0; padding: 0; list-style: none;} 
 
body {padding: 65px 55px;} 
 
footer, header {position: fixed; top: 0; left: 0; right: 0; padding: 15px; background-color: #99f; text-align: center; font-size: 1.5em; z-index: 2;} 
 
footer {top: auto; bottom: 0;} 
 
aside {position: fixed; top: 60px; bottom: 60px; width: 50px; background-color: #999; z-index: 1;} 
 
.left {left: 0;} 
 
.right {right: 0;}

<header>Header</header> 
 
<aside class="left">Left</aside> 
 
<main> 
 
    <h1>Content</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat natus repellendus rem neque quos animi totam ea commodi dolorum! Reprehenderit earum voluptatum id a consequuntur dignissimos perferendis eaque fugit, temporibus!</p> 
 
    <p>Mollitia quas fugiat id dolor autem delectus, iusto facilis velit sunt dignissimos illo ipsum, similique! Quaerat facilis sequi enim maxime, voluptatibus ut, dolorem quod fugiat. Quas nam illo suscipit officiis?</p> 
 
    <p>Facere quaerat perspiciatis ex optio nisi eligendi corporis quo aut et libero totam iure nam quibusdam eius vel, pariatur, consequatur exercitationem laborum temporibus necessitatibus quia ab odio nesciunt eaque unde.</p> 
 
    <p>Esse ullam, veritatis optio possimus ea delectus fuga at cumque natus voluptatum omnis, nesciunt a, sapiente expedita? Corrupti autem soluta nemo alias, id, eius dicta, a deserunt optio ea ipsam.</p> 
 
</main> 
 
<aside class="right">Right</aside> 
 
<footer>Footer</footer>

來源

2015-12-13 14:20:46

你應該嘗試Flexbox的

DEMO

.main-container { 
    display: -webkit-flex; 
    display: flex; 
    min-height: 100vh; 
    flex-direction: column; 
} 

header, footer { 
    padding: 20px; 
    border: 1px solid black; 
} 

main { 
    flex: 1; 
    display: flex; 
    padding: 0; 
} 

.left, .right { 
    flex: 0 0 200px; 
    border: 1px solid black; 
    height: 100%; 
} 

.content { 
    flex: 1; 
}

<div class="main-container"> 
    <header> 
    Header 
    </header> 

    <main> 
    <div class="left">Left</div> 
    <div class="content">Content</div> 
    <div class="right">Right</div> 
    </main> 

    <footer> 
    Footer 
    </footer> 
</div>

來源

2015-12-13 14:26:43

最大高度左/右列

回答

相關問題