全高侧边栏和全高内容，流畅的布局答案

【问题标题】：Full height sidebar and full height content, fluid layout全高侧边栏和全高内容，流畅的布局
【发布时间】：2019-12-07 09:22:55
【问题描述】：

Possible duplicate didn't help

我知道关于这个话题有很多答案，但他们都没有帮助我，我花了几天时间这个问题。 90% 的答案和书籍都给出了这个对我没有帮助的背景技巧。

My code - Plunker

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;
}

现在我的布局如下所示：

我希望它看起来像这样：

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

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

【问题讨论】：

您尝试过网站中的搜索功能吗？有成千上万个这样的问题，所有问题都得到了很好的解决方案。
我已经花了 2 天时间，所有的答案都对我没有帮助，而且大部分都是针对固定布局的，我什至读过一本关于这个主题的书“CSS the missing manual” 90%答案使用此背景技巧给出了相同的解决方案，至少对我来说这是行不通的。

标签： css css-float

【解决方案1】：

我已更新您的代码。在Plunker 上查看。

首先尽量不要使用absolute 或relative 位置，如果不需要的话。

第二个，在你的情况下，通过给出display: inline 和float: left 样式，做同样的事情，所以只使用后一个就足够了。

此外，我已将 HTML 和 BODY 标记的 height 设置为 100%，并对 sidebar 和 content DIVs 执行相同操作，因此他们将 fill parent 的 (body) 高度。

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

【讨论】：

我认为您的回答更准确，并且与我的问题相关。我需要absolute 和relative，因为我不想破坏<li> 的尺寸，因为我不想在其中破坏<a> 并且还放置相对于列表元素的链接文本，从你的回答我构建了一个更好的解决方案plnkr.co/edit/MFTcyNJ0x26kv6v1Nc7c?p=preview
很高兴能帮上忙。

【解决方案2】：

试试这样的：

FIDDLE

标记：

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

CSS

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

【讨论】：

谢谢它似乎可以解决问题，我想知道为什么论坛中的所有答案都给出了背景图片技巧