Я пытаюсь создать фиксированную боковую панель, которая будет оставаться в этой позиции при прокрутке страницы (как на втором изображении), но содержимое страницы находится под этой боковой панелью, а не справа (первое изображение, вы можете видеть синяя часть на боковой панели, это div под панелью.)

Img1: введите описание изображения здесь

Img2: введите описание изображения здесь

(Я использую ссылки на изображения, потому что не могу их опубликовать)

Html:

<div class='barralado'>

        ~sidebar content~
</div>

    <div class='conteudo'>

        <div class='inicio'>
            <div class='topo'>
                <p class='titulo'>Liga Juizforana</p>
            </div>
        </div>

    </div>

Css:

.barralado {
    position: fixed;
    top: 0;
    left: 0;
}

.conteudo {
    }

.conteudo .topo {
    background-color: #ffffff;
}

.topo .titulo {
    font-size: 4em;
    color: white;
    text-shadow: 2px 2px 1px rgba(150, 150, 150, 1);
    margin-top: 3em;
    margin-left: 3.5em;
}

Я попытался поставить оба на плаву слева, я попытался очистить, я перепробовал все позиции на обоих, и это не сработало

2-й мини-вопрос: как сделать div "Conteudo" 100vh после того, как поместил его справа на боковой панели? Когда я пробую, он не меняется на 100vh.

2
assisrMatheus 27 Фев 2015 в 22:40

3 ответа

Лучший ответ

Фиксированное позиционирование div будет зафиксировано на странице, даже если вы прокрутите его. И все это находится под ним (у него приоритет z-index).

Чтобы исправить это, задайте левое заполнение div вашего контента равным ширине боковой панели.

.barralado {
    position: fixed;
    top: 0;
    left: 0;
    min-height: 300px; // I suggest you give a value to your sidebar. 
    width:300px; //This is your width;
}

.contneudo{
    padding-left:300px; //This is the padding that will go around your sidebar
}
2
Alexey 27 Фев 2015 в 19:54

В этом сценарии с фиксированной шириной вы можете сделать свой контент div абсолютно позиционированным, чтобы избежать попадания под боковую панель:

.conteudo {
   position: absolute;
   top: 0;
   left: 192px; // this is your sidebar width, according to your screenshot
}

Или если по какой-то причине вам нужно избегать абсолютного позиционирования, вы можете компенсировать его с помощью поля:

.conteudo {
   margin-left: 192px; // this is your sidebar width, according to your screenshot
}
-1
NenadP 27 Фев 2015 в 20:13

Если ваша боковая панель имеет фиксированную ширину, вы можете использовать отступ слева от контейнера содержимого ширины боковой панели. Или вы можете переместить его вправо и установить ширину с помощью функции CSS calc.

.conteudo {
  width: -webkit-calc(100% - 200px);
  width: calc(100% - 200px);
  float:right;
}

Используя ваш код и опцию заполнения:

.barralado {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
}

.conteudo {
    padding-left: 300px;
}

.conteudo .topo {
    background-color: #ffffff;
}

.topo .titulo {
    font-size: 4em;
    color: white;
    text-shadow: 2px 2px 1px rgba(150, 150, 150, 1);
    margin-top: 3em;
    margin-left: 3.5em;
}

Есть еще несколько способов, но, надеюсь, один из двух поможет вам добиться желаемого.

1
Steven Hoskins 3 Мар 2015 в 11:05