Заставьте div занять оставшееся место после боковой панели

Question

Заставьте div занять оставшееся место после боковой панели

0

Я пытаюсь создать очень общий макет здесь с боковой панелью и секцией содержимого справа. Ширина секции боковой панели fixed (здесь 120px), и я хочу, чтобы контейнер с правой стороны занимал оставшееся пространство страницы (с краем 60 пикселей справа).

Вот как выглядит разметка:

<body>
    <div class="wrapper">
        <div class="content">
            <div class="left-sidebar">
                <ul class="sidebar-menu">
                    <li>Item 1</li>
                    <li>Item 2</li>
                </ul>
            </div>
           <div class="right-main-content">
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
           </div>
        </div>
    </div>
</body>

Вот и сценарий выше: http://jsfiddle.net/6nLtp/

В моем случае, что происходит, что правильный контейнер идет ниже боковой панели и принимает 100% ширину. Тем не менее, я ожидал, что он займет только оставшееся пространство справа от боковой панели (и с краем 60 пикселей справа от страницы). Контейнер поставляется вместе с боковой панелью, когда я указываю ширину, но я не уверен, зачем мне это нужно? Поскольку элементы div (боковая панель и правый контейнер перемещаются), почему нельзя правильно использовать контент с боковой панелью?

user1240679 13 дек. 2013, в 07:09

Источник

0

checkout stackoverflow.com/questions/580195/… , в частности jsFiddle, на который он ссылается: jsfiddle.net/uEj55/1
stefancarlton 13 дек. 2013, в 06:20
0

возможно дублирование CSS двух div рядом друг с другом
jstricker 13 дек. 2013, в 06:29

Теги:

html

css

5 ответов

Ещё вопросы

checkout stackoverflow.com/questions/580195/… , в частности jsFiddle, на который он ссылается: jsfiddle.net/uEj55/1
возможно дублирование CSS двух div рядом друг с другом

Nikhil Kudtarkar · Answer 1 · 2013-12-13T05-18-00.000Z

Я не знаю, если это хороший код, но он работает для меня

.wrapper {width:100%;height:100%;}
.left-sidebar {width:120px;height:200px;margin:20px 0 0 0;border:1px solid red; float:left;}
.right-main-content{margin:20px 60px 0 140px; display:block;padding-top:5px; }
.right-main-content p {border: 1px solid green;}
.sidebar-menu{list-style-type:none;}
.project-picture-bar{height:100px;width:100%;border-top:3px solid grey;border-bottom:3px solid grey;}

Pradeep Pansari · Answer 2 · 2013-12-13T04-56-00.000Z

Попробуйте это... Обновлено Ссылка

.wrapper {width:100%;height:100%;}
.content{position:relative;}
.left-sidebar {width:120px;height:200px;margin:20px 0 0 0;border:1px solid red; position:absolute; }
.right-main-content{margin:20px 0px 0px 0px;padding:20px 10px;border: 1px solid green; position:absolute; left:140px;}
.sidebar-menu{list-style-type:none;}
.project-picture-bar{height:100px;width:100%;border-top:3px solid grey;border-bottom:3px solid grey;}

Удачи... Наслаждайтесь

Sridhar R · Answer 3 · 2013-12-13T04-20-00.000Z

Попробуй это

CSS

.wrapper {width:100%;height:100%;display:inline-block;}
.left-sidebar {max-width:120px;width:20%;height:200px;margin:20px 0 0 0;border:1px solid red;float:left;}
.right-main-content{margin:20px 60px 0 0;width:80%;border: 1px solid green;float:right;}

DEM0

leigero · Answer 4 · 2013-12-13T03-38-00.000Z

Вы можете установить левую <div> в фиксированное положение и поместить правую <div> влево. Если вы сделаете это, убедитесь, что вы используете соответствующие поля для противодействия пространству, которое занимает левый div.

.wrapper {
width:100%;
height:100%;
}
.left-sidebar {
    position: fixed;    /*---- changed this --->*/
    width:120px;
    height:200px;
    margin:20px 0 0 0;
    border:1px solid red;
}
.right-main-content{
    float: left;              /*---- changed this --->*/
    width: auto; 
    margin:20px 0 0 122px;     /*---- changed this --->*/
    border: 1px solid green;
}
.sidebar-menu{
    list-style-type:none;
}
.content{
    margin: 0px auto;
}

рабочий пример:

http://jsfiddle.net/6nLtp/6/

Rajnikant Kakadiya · Answer 5 · 2013-12-13T03-36-00.000Z

Используйте float для достижения результата.

CSS

.wrapper {width:100%;height:100%;}
.content{padding-top:20px;}
.left-sidebar {width:120px;height:200px;margin:0 0 0 0;border:1px solid red;float:left;}
.right-main-content{margin:0 60px 0 140px;border: 1px solid green;}
.sidebar-menu{list-style-type:none;}
.project-picture-bar{height:100px;width:100%;border-top:3px solid grey;border-bottom:3px solid grey;}

демонстрация

В моем случае я дал элементам float, но я забыл написать это в скрипке. Почему это не работает, если я даю float обоим контейнерам (что я и сделал в моем случае)?
Не обоим. Дайте поплавку только «левую боковую панель». Правая боковая панель будет расширяться в оставшееся пространство. Просто оставьте поле слева в соответствии с шириной «левой боковой панели».