Как перемещать левый контент и исправлять правый контент?

Question

Как перемещать левый контент и исправлять правый контент?

0

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

Здесь я создал скрипку. просто нужна помощь с css.

http://jsfiddle.net/PxbX9/

#header {
    position:fixed;
    background:red;
    width:700px;
    height:30px;
}
#left-block {
    float:left;
    width:350px;
    background:blue;
    height:1000px;
    margin-top:30px;
}
#right-block {
    float:left;
    width:350px;
    height:1000px;
    background:pink;
    margin-top:30px;
    .fixed-block {
        postion:fixed;
        height:1000px;
    }

Paul Designer 02 окт. 2013, в 14:47

Источник

Теги:

html

css

header

fixed

2 ответа

0

Взгляните на этот рабочий скрипт

Чистое решение для CSS, очень динамичное, полностью отзывчивое.

HTML:

<div class="Container">
    <div class="Header">
    </div>
    <div class="HeightTaker">
        <div class="Wrapper">
            <div class="RightContent">
            </div>
            <div class="LeftContent">
            </div>
        </div>
    </div>
</div>

CSS:

*
{
    margin: 0;
    padding: 0;
}
html, body, .Container
{
    height: 100%;
}
    .Container:before
    {
        content: '';
        height: 100%;
        float: left;
    }
.HeightTaker
{
    position: relative;
    z-index: 1;
}
    .HeightTaker:after
    {
        content: '';
        clear: both;
        display: block;
    }
.Wrapper
{
    position: absolute;
    width: 100%;
    height: 100%;
}

.Header
{
    /*for demonstration only*/
    background-color: #bf5b5b;
}
.Wrapper > div
{
    height: 100%;
    overflow: auto;
}

.LeftContent
{
    /*for demonstration only*/
    background-color: #90adc1;
}
.RightContent
{
    float: right;
    width: 500px;
    /*for demonstration only*/
    background-color: #77578a;
}

avrahamcool 02 окт. 2013, в 09:42

0

Спасибо за вашу помощь !
Paul Designer 02 окт. 2013, в 14:54

Ещё вопросы

Xareyo · Accepted Answer · 2013-10-02T11-27-00.000Z

Это может быть достигнуто путем реструктуризации CSS:

#header {
    position:fixed;
    background:red;
    width:700px;
    height:30px;
}
#left-block {
    float:left;
    width:350px;
    background:blue;
    height:1000px;
    margin-top:30px;
}
#right-block {
    display: inline-block;
    float:right;
    width:350px;
    height:1000px;
    background:pink;
    margin-top:30px;
    position:fixed;
}

Я только сделал изменения CSS в селектор #right-block.

Удален класс .fixed-block, у которого была опечатка в виде postion (должна быть position).
position: fixed; был добавлен в селектор #right-block.
display: inline-block; и float: right; были добавлены также.

DEMO

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