全高度侧边栏和全高内容，流体布局

Question

我知道关于这个主题的答案很多，但是没有一个对我有帮助，我花了几天的时间这个问题。90％的答案和书籍给出了这种背景技巧，但对我没有帮助。

HTML

<body >
<h1>Hello Plunker!</h1>

<div class="sidebar">
  <ul>
        <li><a href="#">ANALYTICS</a></li>
        <li><a href="#">STYLES</a></li>
        <li><a href="#">VOTERS</a></li>
        <li><a href="#">GET STARTED</a></li>
        <li><a href="#">UPDATE</a></li>
  </ul>
</div>
<div class="content">
  <p>Content</p>
</div>

CSS

body{
  width: 100%;
  margin: 0 auto;

}

.content {
  width: 95%;
  display: inline;
  float: left;
  background: url(http://s9.postimg.org/ft91z9c6z/bg_content.png) repeat-y left top;
}

.sidebar{
  width: 5%;
  display: inline;
  height: 100%;
  float: left;
  background: url(http://s21.postimg.org/kexv3aupf/bg_sidebar.png) repeat-y left top;

}

.sidebar ul{
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;

}

.sidebar li{
     padding: 50%;
     position: relative;
}

.sidebar a{
        display: block;
        font-size: 0.5em;
        position: absolute;
        bottom: 0;
        left: 0;
}

现在我的布局看起来像这样：

“现在我的布局看起来像这样：”

我希望它看起来像这样：

我遵循了guide中提供的possible duplicate，但没有帮助我认为这是因为我正在使用floats和fluid layout。

如何在保持fluid layout和float位置的同时扩展列。

Answer 1

我已经更新了您的代码。在Plunker上签出。

首先，如果不需要，请不要使用absolute或relative位置。

第二种，在您的情况下，通过提供display: inline和float: left样式，可以做相同的事情，因此仅使用后一种样式就足够了。

[此外，我将height和HTML标签的BODY设置为100％，并且对sidebar和content DIV的设置相同，因此它们将fill的[ C0]的（parent）高度。

最后，您的问题之一是body属性的repeat-y值。它没有在x轴上重复，因此您没有看到background的实际大小。我只是将其设置为DIV，而不是repeat。

Answer 2

尝试这样的事情：

repeat-y

标记：

FIDDLE

CSS

<h1>Hello Plunker!</h1>
<div class="container">       
    <div class="sideBar">sideBar</div>
    <div class="content">content</div>
</div>

Answer 3

这是一个古老的问题，但* { margin:0;padding:0; } html,body,.container, .sideBar, .content { height: 100%; } h1 { height: 50px; line-height: 50px; } .container { margin-top: -50px; padding-top: 50px; box-sizing: border-box; } .sideBar { float:left; width: 100px; background: aqua; } .content { overflow:hidden; background: yellow; }对此有很好的解决方案。

Zurb

全高度侧边栏和全高内容，流体布局

问题描述投票：10回答：3

3个回答

标记：

CSS

最新问题

全高度侧边栏和全高内容，流体布局

问题描述 投票：10回答：3

3个回答

标记：

CSS

最新问题

问题描述投票：10回答：3