Как заставить div занимать оставшееся место

Question

Как заставить div занимать оставшееся место

0

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

<div id="container">
   <img src="image.png"/>
   <div id="menu"><ul>(...)</ul></div>
</div>

Проблема в том, что я не знаю высоту изображения, я только хочу, чтобы он был как можно шире, а затем его высота должна автоматически устанавливать соотношение. "Menu" div должен находиться под этим изображением и занимать оставшуюся высоту.

#container img{
   width:100%;
}

#menu{
   width:100%;
}

#menu li{
   height:50%;
}

http://jsfiddle.net/v6b3S/

André 02 окт. 2013, в 01:53

Источник

0

Вы можете использовать функцию jquery, чтобы установить высоту и ширину.
Viji 01 окт. 2013, в 23:37
0

Попробуйте width: auto
Colandus 01 окт. 2013, в 23:38

Теги:

html

css

responsive-design

1 ответ

Ещё вопросы

Вы можете использовать функцию jquery, чтобы установить высоту и ширину.

aaronmallen · Answer 1 · 2013-10-01T20-57-00.000Z

Вы должны установить определенную высоту хотя бы на один из двух объектов. Если вы хотите, чтобы не обрезали изображение, используйте атрибуты фонового изображения: http://jsfiddle.net/v6b3S/4/

#container{
    height: 750px;
    overflow:hidden;
    border: 1px solid black;
}

#top-image {
    display: block;
    background: url('http://eofdreams.com/data_images/dreams/image/image-09.jpg') center center no-repeat;
    background-size: 100%;
    width: 100%;
    height: 50%;
}
#menu{
   width:100%;
    height:50%;
   border: 1px solid red;
}

#page{
    height:100%;
}
#a{
    background-color:black;
}

#b{
    background-color:red;
}

#c{
    background-color:blue;
}

#d{
    background-color:yellow;
}
li{
    list-style:none;   
    display:block;
    height:100%;
    background-size: 100%;
    width:25%;
    float:left;
}
span{
    height:100%;
    width:100%;
    display:block;
}
ul{
 height:100%;
    width:100%;
    margin:0;
    padding:0;
}

Спасибо, но это не работает. Меню не занимает все доступное пространство.
@ Андре Попробуйте редактировать
Это тоже не работает. Меню имеет такую же высоту, как и его родитель, поэтому переполнение.
Можете ли вы сделать скрипку, чтобы я мог видеть, что вы пытаетесь достичь
Хорошо, я только что сделал один: jsfiddle.net/v6b3S В самом коде есть изображения в li, но я заменил их текстом.
Я заменил тексты пролетами с цветным фоном.
jsfiddle.net/v6b3S/2 Кажется, это работает для меня, возможно, я не понимаю, в чем ваш вопрос.
Ах, я вижу правку, и вы собираетесь заполнять нижнюю часть изображениями?
Вы можете видеть, что я сделал 4 _li_s, но видна только половина из первых двух jsfiddle.net/v6b3S/1
Я на самом деле хочу, чтобы размер изображений был установлен на основе оставшегося свободного места, чтобы все было видно.
ты знаешь, сколько у тебя будет всего ли? jsfiddle.net/v6b3S/3
Извините, это не очень помогло. Я думаю, что лучший способ сделать это - использовать JavaScript, так что я буду делать, пока не найду лучшее решение. Спасибо, в любом случае.