Question

我有问题，希望有人能帮帮我... 我已经想要留下警告说我是一个初学者和那些对我有耐心的人：）

目前我的html / css文件如下所示：

我想知道它是什么样的：

正如您所看到的，在＆＃34;内容＆＃34;的内容之后超过＆＃34;左＆＃34; ＆＃34;对＆＃34;，＆＃34;内容＆＃34;占据整个空间

我试图让＆＃34;离开＆＃34;和＆＃34;对＆＃34;无论＆＃34;内容＆＃34;

的大小，始终占据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代码没有显示主题-.-＆＃39;我会记下我使用的确切示例：

<!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。

Answer 1

也许你应该给内容一个特定的高度和clear: both，这样页脚就是你想要的位置。

别忘了

页脚

fs.readFile

Answer 2

我可以为您提供一个简单的例子。

* {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>

Answer 3

您应该尝试 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>

最大高度左/右列

3 个答案: