全高侧边栏和全高内容,流体布局[英] Full height sidebar and full height content, fluid layout

本文是小编为大家收集整理的关于全高侧边栏和全高内容,流体布局的处理方法,想解了全高侧边栏和全高内容,流体布局的问题怎么解决?全高侧边栏和全高内容,流体布局问题的解决办法?那么可以参考本文帮助大家快速定位并解决问题。

问题描述

可能的重复无济于事

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

我的代码-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;
}

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

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

,我希望它看起来像:

我遵循此指南可能重复,这无济于事 我认为这是因为我正在使用floats和fluid layout.

在保持fluid layout和float定位时如何扩展列.

推荐答案

我已经更新了您的代码.在 plunker "> plunker 上查看.

首先尝试不使用absolute或relative位置,如果不需要它们.

第二,在您的情况下,通过给出display: inline和float: left样式,做同样的事情,因此只能使用后一个.

此外,我将HTML的height和sidebar标签设置为100%,并且对sidebar和content content DIV s进行了相同的操作,因此它们将fill parent的(body)高度.

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

其他推荐答案

尝试这样的事情:

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

本文地址:https://www.itbaoku.cn/post/566080.html