Ширина div, занимающая всю оставшуюся ширину

Я пытаюсь установить верхнюю панель справа от моего левого меню. Я положил width: 100% моего #top_bar, но там так много. Я бы хотел, чтобы моя верхняя панель занимала только оставшееся пространство экрана.Ширина div, занимающая всю оставшуюся ширину

HTML:

<body>  
    <div id="menu_left"></div> 
    <div id="top_bar"></div>  
</body>

CSS:

#menu_left { 
    background-color: #354052; 
    position: fixed; 
    height: 100%; 
    float: left; 
    width: 200px; 
} 

#top_bar { 
    border-bottom: 1px solid #EFF0F3; 
    position: absolute; 
    background-color: white; 
    left: 200px; 
    height: 70px; 
    width: 100%; 
}

Результат: enter image description here

источник

2015-06-13 wawanopoulos

'ширина: вычи (100% - 200px);' http://caniuse.com/#feat=calc –

Ширина страницы становится 100% + 200px, поэтому появляется горизонтальная полоса прокрутки. Есть ли сильное ограничение для меню слева, что оно должно быть ровно 200 пикселей? – cezar

@cezar Да, размер левого меню должен оставаться на 200px – wawanopoulos

Вы можете использовать запас влево для большой DIV

CSS:

#menu_left { 
    background-color: #354052; 
    position: fixed; 
    height: 100%; 
    float: left; 
    width: 200px; 
} 
#top_bar { 
    border-bottom: 1px solid #EFF0F3; 
    background-color: red; 
    margin-left: 200px; 
    height: 70px; 
}

HTML:

<body> 
    <div id="menu_left"></div> 
    <div id="top_bar"></div> 
</body>

Работа Demo

источник

2015-06-13 09:01:20 Mitul

Я не думаю, что это то, что ищет OP, но может дать ему представление о том, как полностью перепроектировать его сайт. –

Это будет работать, но оно не реагирует и на небольших экранах, как смартфоны, произведет плохое впечатление. – cezar

Вы можете использовать ширину и маржу на%, тогда она будет работать и в реагировании – Mitul

Просто добавьте в ваш CSS:

body { 
    margin: 0; 
    width: 100%; 
    overflow: hidden; 
}

источник

2015-06-13 09:07:12 TheWebDesignerPro

#top_bar { 
    border-bottom: 1px solid #EFF0F3; 
    position: absolute; 
    background-color: white; 
    top: 0px; 
    left: 200px; 
    right: 0px; 
    height: 70px; 
}

источник

2015-06-13 09:07:40 NeoWang

Возможно, this? Вы могли только изменить width: 100% на right: 0. Также не требуется float: left.

html, body { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0;  
 
} 
 

 
#menu_left { 
 
    background-color: #354052; 
 
    position: fixed; 
 
    height: 100%; 
 
    width: 200px; 
 
} 
 

 
#top_bar { 
 
    border-bottom: 1px solid #EFF0F3; 
 
    position: absolute; 
 
    background-color: white; 
 
    left: 200px; 
 
    right: 0; 
 
    height: 70px; 
 
}

<div id="menu_left"></div> 
 
<div id="top_bar"></div>

источник

2015-06-13 10:52:55

Попробуйте использовать контейнер шириной 100% вокруг элементов.

<div class="container"> 

    <div id="menu_left"> 
    </div> 

    <div id="top_bar"> 
     NAVIGATION 
    </div> 

</div>

Смотрите эту ручку я только что создал: http://codepen.io/anon/pen/MwodLx

источник

2015-06-13 11:00:37 WebWorker

Ширина div, занимающая всю оставшуюся ширину

ответ

Смежные вопросы