Фиксированное меню слева и прокручиваемый контент

Я хотел бы иметь меню, которое фиксируется слева, а содержимое прокручивается справа.

То, что я хочу сделать, точно такое же, как на этом веб-сайте: http://other.wpengine.com/

Меню исправлено, а содержимое прокручивается.

Не могли бы вы, ребята, помочь мне?

Заранее спасибо!


menu css css-position fixed
person Jônatas Flausino    schedule 15.01.2014    source источник
comment
Сделайте jsfiddle с тем, что у вас есть. Тогда мы можем помочь   -  person Michael Tempest    schedule 15.01.2014
comment
Что-то на моем веб-сайте или в проекте не работает. Можно просто вставить ссылку на него?   -  person fiskolin    schedule 15.01.2014

Ответы (2)


arrow_upward
24
arrow_downward

Быстрый один от меня, проверьте это. Вы должны были хотя бы попробовать сами, но я мало что делал, поэтому я что-то сделал.

HTML:

<div id="left">Side menu</div>
<div id="right">Scroll
    <br />Scroll
    <br />Scroll
</div>

CSS:

html, body {
    height: 100%;
    margin: 0;
    font-size: 20px;
}
#left {
    width: 20%;
    height: 100%;
    position: fixed;
    outline: 1px solid;
    background: red;
}
#right {
    width: 80%;
    height: auto;
    outline: 1px solid;
    position: absolute;
    right: 0;
    background: blue;
}

ДЕМО ЗДЕСЬ

person Ruddy    schedule 15.01.2014
comment
Как я уже сказал Афроману, я пытался... Ваш код здесь работает очень хорошо. Спасибо, я ценю. Я должен был поставить код.. Моя вина! - person Jônatas Flausino; 15.01.2014
comment
Не похоже, что это работает в IE8. Если вы используете left:200px, а не right:0 для правого div, это должно решить эту проблему. - person Matt Rowles; 16.01.2014
comment
@MattRowles В этом сценарии было бы лучше использовать left: 20%;. - person amallard; 17.07.2016

arrow_upward
2
arrow_downward

Я подготовил краткий пример того, что вы хотите создать здесь.

HTML

<div class="content">
    <div class="side">
        <ul>
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
        </ul>
    </div>

    <!-- content -->

</div>

CSS

div.content {
    margin-left: 200px;
}
div.side {
    position: fixed;
    height: 100%;
    top: 0;
    left: 0;
    background: blue;
    width: 180px;
    padding: 10px;
}
ul {
    margin: 0;
    padding: 0;
}
ul li {
    color: #fff;
}

Примечание. Вы должны попытаться предоставить то, что вы связали, вместо того, чтобы ожидать, что другие полностью напишут все за вас.

Надеюсь это поможет.

person AfromanJ    schedule 15.01.2014
comment
Пробовал Афроман.. Просто не сработало. Проверяя ваш код, в моем коде отсутствовала абсолютная позиция. Тхо, большое спасибо. - person Jônatas Flausino; 15.01.2014