CSS, разрабатывающий проблему - завивание

Я пытаюсь построить меню (см. скрипка). У меня есть текстовое окно, которое будет скрыто в некоторых случаях, показано в некоторых случаях, таким образом, отделения ниже этого должны будут отрегулировать положение, когда textbox скрыт. listitems отделение содержит партию пунктов списка. Нижнее отделение должно быть внизу экрана. maindiv положение должен быть зафиксирован. Отделение области меню в конце не может быть удалено. Что-то с определением стилей испорчено, я не могу прокрутить вниз к последнему пункту. Есть ли способ сделать это, не назначая определенную высоту для listitems отделения?

I'm trying to get something like this. http://tinypic.com/r/1t0sat/6

Любые намеки или указатели будут полезны. Спасибо!

0
Я испытываю затруднения при понимании того, чего вы пытаетесь достигнуть. Любой эскиз диаграммы/краски значительно ценится.
добавлено автор Benjamin Crouzier, источник
@pinouchon, вот связь с диаграммой tinypic.com/r/1t0sat/6
добавлено автор ABC, источник

6 ответы

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

 #mainDiv {
    bottom: 0px;
    border-top-width: 1px;
    border-right-width: 1px;   
    border-bottom-width: 1px;
    border-left-width: 1px;
    position: relative;
    min-height:100%;
    height:auto !important;
    z-index: 30;
    box-shadow: 5px 5px 5px #888;
    background-color: rgb(0, 87, 71);
}
#mainDiv .MainContentArea {
    width: 100%;
    height: 100%;   
     height:auto !important;
    min-width: 240px;
     min-height:100%;
}
#mainDiv .HeadingArea {
    left: 0px;
    top: 0px;
    height: 16px;
    right: 0px;
    padding-top: 8px;
    padding-right: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
    white-space: nowrap;  
    background-color: rgb(96, 76, 91);
}
#mainDiv .InputArea {
    left: 0px;
    top: 0px;
    height: 30px;
    right: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    white-space: nowrap;

}
#mainDiv .SubTitleArea {
    left: 0px;
    top: 0px;
    height: 16px;
    right: 0px;
    padding-top: 12px;
    padding-right: 8px;
    padding-bottom: 12px;
    padding-left: 8px;
    white-space: nowrap;

}
#mainDivSearch input[type='text'] {
    width: 220px;
    height: 30px;
    padding-top: 0px;
    padding-right: 22px;
    padding-bottom: 0px;
    padding-left: 3px;
}
#mainDiv input[type='checkbox'] {
    vertical-align: bottom;
}
#mainDiv .ContentArea {
    left: 0px;
    top: 0px;
    height: 100%;

}
#mainDiv .MenuArea {
   width:100%;
    height: 28px;
    text-align: center;

    bottom: 0px;
    padding-top: 6px;
    padding-right: 6px;
    padding-bottom: 6px;
    padding-left: 6px;
    white-space: nowrap;
    position: absolute;
    background-color: rgb(216, 176, 131);

}
#ContentListArea {
    width: 100%;
    height: 100%;

}
#ContentListArea .Options2Area {
    left: 0px;
    top: 0px;
    height: 16px;
    right: 0px;
    padding-bottom: 6px;
    margin-top: 10px;
    margin-right: 15px;
    margin-bottom: 0px;
    margin-left: 18px;
    vertical-align: top;
    border-bottom-color: #afafaf;
    border-bottom-width: 1px;
    border-bottom-style: solid;

}
#ContentListArea .ListItemsArea {
    left: 0px;
    top: 32px;
    right: 0px;
    bottom: 0px;
    overflow: auto;
    padding-top: 6px;
    padding-right: 6px;
    padding-bottom: 6px;
    padding-left: 18px;

}
.ItemList li {
    padding-bottom: 4px;
    display: block;
    list-style-type: none;
}
.ItemList li .ItemArea {

    height: 15px;
}
.ItemList li .ItemDetail {
    left: 0px;
    top: 0px;
    white-space: nowrap;

}
.ItemList li .ItemLabel {
    padding-top: 8px;
    white-space: nowrap;
}
textarea, select, input[type=text] {
    width: 99%;
    overflow: auto;

}

body, html
{
    height: 100%;
    min-height: 100%;
}
1
добавлено

Replace this line <div id="mainDiv" style="left: 198px; top: 101px; display: block;"> with <div id="mainDiv" style="left: 198px; display: block;"> and remove <div class="MenuArea"></div>

0
добавлено
Мне нужен тот MenuArea, чтобы появиться там.
добавлено автор ABC, источник

необходимо установить <сильную> высоту для #ContentListArea.ListItemsArea в стиле как ниже

#ContentListArea .ListItemsArea {
left: 0px;
top: 32px;
right: 0px;
bottom: 0px;
overflow: auto;
padding-top: 6px;
padding-right: 6px;
padding-bottom: 6px;
padding-left: 18px;
position: absolute;
height: 193px;/*change this according to your  need*/

}

fiddle demo http://jsfiddle.net/krish/vhFX3/1/

0
добавлено
Я хочу, чтобы меню началось с данного погашения и пошло до конца экрана. Область списка изделия должна заполнить пространство.
добавлено автор ABC, источник

необходимо установить <сильную> высоту для #ContentListArea.ListItemsArea в стиле как ниже

#ContentListArea .ListItemsArea {
left: 0px;
top: 32px;
right: 0px;
bottom: 0px;
overflow: auto;
padding-top: 6px;
padding-right: 6px;
padding-bottom: 6px;
padding-left: 18px;
position: absolute;
height: 193px;/*change this according to your  need*/

}

fiddle demo http://jsfiddle.net/krish/vhFX3/1/

0
добавлено
Я хочу, чтобы меню началось с данного погашения и пошло до конца экрана. Область списка изделия должна заполнить пространство.
добавлено автор ABC, источник

замените свой собственный кодовый фрагмент моим в CSS

#ContentListArea .ListItemsArea {
    left: 0px;
    top: 32px;
    right: 0px;
    bottom: 0px;
    overflow: auto;
    padding-top: 6px;
    padding-right: 6px;
    padding-bottom: 6px;
    padding-left: 18px;
    //position: absolute;
    height: 200px;
}

дайте ему соответствующую высоту так, чтобы это могло завиться в той высоте.

0
добавлено
Вы хотите зеленое второстепенное отделение до конца страницы...??? и что относительно светло-коричневого отделения в основании...?? Пожалуйста, clearify это
добавлено автор vicky, источник
Я хочу, чтобы то отделение пошло до нижнего отделения. Проверьте вопрос для диаграммы.
добавлено автор ABC, источник

замените свой собственный кодовый фрагмент моим в CSS

#ContentListArea .ListItemsArea {
    left: 0px;
    top: 32px;
    right: 0px;
    bottom: 0px;
    overflow: auto;
    padding-top: 6px;
    padding-right: 6px;
    padding-bottom: 6px;
    padding-left: 18px;
    //position: absolute;
    height: 200px;
}

дайте ему соответствующую высоту так, чтобы это могло завиться в той высоте.

0
добавлено
Вы хотите зеленое второстепенное отделение до конца страницы...??? и что относительно светло-коричневого отделения в основании...?? Пожалуйста, clearify это
добавлено автор vicky, источник
Я хочу, чтобы то отделение пошло до нижнего отделения. Проверьте вопрос для диаграммы.
добавлено автор ABC, источник
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)