it-swarm.com.ru

Полная высота боковой панели и полное содержание содержимого, расположение жидкости

Возможный дубликат не помог

Я знаю, что есть много ответов на эту тему, но ни один из них не помог мне, и я потратил несколько дней на Эту проблему . 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;
}

Прямо сейчас мой макет выглядит следующим образом:

Right now my layout looks like this:

И я хочу, чтобы это выглядело так:

Я следовал этому руководству предлагался в возможном дубликате и это не помогло Я думаю, это потому, что я использую floats и fluid layout.

Как я могу расширить столбцы, сохраняя позиционирование fluid layout и float?.

10
Canttouchit

Я обновил ваш код. Проверьте это на Plunker

Сначала старайтесь не использовать позиции absolute или relative, если в них нет необходимости. 

Второй, в вашем случае, предоставляя стили display: inline и float: left, делает то же самое, поэтому достаточно использовать только последний. 

Кроме того, я установил для тегов height of HTML и BODY значение 100% и сделал то же самое для sidebar и contentDIVs, поэтому они будут fill высоты parent (body). 

И, наконец, одной из ваших проблем было значение repeat-y свойства background. Он не повторялся по оси x, поэтому вы не видели фактический размер DIVs. Я просто установил repeat вместо repeat-y.

9
Karlen Kishmiryan

Попробуйте что-то вроде этого:

СКРИПКА

Разметка:

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

Это довольно старый вопрос, но Zurb ребята, есть хорошее решение для этого.

http://foundation.zurb.com/apps/

0
Andrej Kaurin