/ / как да разтеглите неупоменатите списъци с плъзгача до дъното на страницата - html, css

как да разтеглям неподредени списъци с лентата за превъртане до края на страницата - html, css

Аз се боря да направя една от моите уеб страници по-красива.

Страницата има няколко списъка, които могат да иматот 0 до 500+ елемента. Списъците започват от различни нива / y-координати. Как мога да наглася височината на списъците, така че те да се разтеглят, за да заемат останалата част от височината в браузъра, заедно с долния колонтитул на страницата? като превъртащи се списъци.

Възможно ли е да го направите без сложни изчисления, включващи височини на елементите над списъците?

Ето примерната страница, която създадох, за да изясня въпроса: http://jsfiddle.net/dilipvshah/gh2Au/

CSS

.header {
width: 800px; height: 50px; border: solid 1px black; text-align: center; vertical-align: middle;
}
.footer {
width: 800px; height: 20px; border: solid 1px black; text-align: center; vertical-align: middle;
}
.subHeader {
display: table-cell; height: 50px; text-align: center;
}
.content {
display: table; width: 800px; text-align: center;
}
.contentInner {
display: table-row; width: 100%; text-align: center;
}
.contentLeft {
display: table-cell; width: 30%; border: solid 1px black; text-align: center;
}
.contentRight {
display: table-cell; height: 400px; border: solid 1px black; text-align: center;
}
.tableLayout {
display: table; width: 100%;
}
.tableRowLayout {
display: table-row; width: 100%;
}
.listLeft {
list-style: none; text-align: left; max-height: 500px; overflow-y:auto;
}
.listRight {
list-style: none; text-align: left; max-height: 500px; overflow-y:auto;
}

HTML

<body>
<div class="header">
Header
</div>

<div class="content">
<div class="contentInner">
<div class="contentLeft">
Left
<ul id="leftList" class="listLeft">
<li> ... </li>
[ ... ]
</ul>
</div>

<div class="tableLayout">
<div class="tableRowLayout">
<div class="subHeader">
Sub-header
</div>
</div>
<div class="tableRowLayout">
<div class="contentRight">
Right
<ul id="rightList" class="listRight">
<li> ... </li>
[ ... ]
</ul>
</div>
</div>
</div>
</div>
</div>

<div class="footer">
Footer
</div>

</body>

Добавяне на изображение за изясняване на въпроса. въведете описанието на изображението тук

Отговори:

0 за отговор № 1

Ключът към това е да се използва position:absolute с top:0;bottom:0 за да се гарантира, че списъците точно попълват останалата височина на прозореца.

цигулка

Забележка:

  • Премахнах маркирането / css, свързано с таблиците. (Това намалява много маркиране и css)

  • JavaScript в цигулката няма нищо общо с оформлението - просто създава съдържанието на фиктивни списъци


Свързани въпроси


Коментари (0)

Добави коментар