Гибкий полноэкранный макет с CSS - PullRequest
Новая
       2

Гибкий полноэкранный макет с CSS

0 голосов
/ 13 июля 2011

Я создаю полноэкранное (html, body {height: 100%}) веб-приложение и у меня есть экран, имеющий форму в верхней (приблизительно) половине, и некоторую другую информацию с двумя кнопками в нижней (приблизительно) половине.

То, что я хочу сделать (будучи сенсорным экраном в промышленной среде), это сделать эти кнопки как можно большими.Таким образом, у них есть height: 50% внутри нижнего контейнера.

Вопрос в том, как получить верхнюю половину, чтобы взять необходимую ей высоту, и нижнюю, чтобы взять остальное?то есть возможно ли это с помощью CSS (желательно 2,1, но 3 тоже хорошо)?

Ответы [ 4 ]

2 голосов
/ 13 июля 2011

В CSS 2.1 нет способа создать элемент, занимающий остальное пространство по вертикали.Блочные элементы, такие как теги Div, будут автоматически растягиваться, чтобы заполнить пространство по горизонтали, но не будут делать это по высоте.Это означает, что вы не можете заставить что-то, например страницу содержимого или кнопки, растянуться, чтобы заполнить оставшуюся часть пустого пространства.

Лучший способ добиться чего-то подобного - с помощью уловок или точного знаниянасколько высоко будет каждый элемент.Например, если вы знаете точный процент, который будут составлять другие элементы, вы можете жестко запрограммировать процент в вашей таблице стилей, как описано здесь.Другой трюк состоит в том, чтобы нижний элемент заполнил все окно и скрыл верхнюю половину формой.

Таблицы, однако, являются единственными элементами, которые растягиваются, чтобы заполнить вертикальное пространство.Это может быть единственным доступным решением для вас.Пример этого показан ниже: 

<form ...>
<table id="container">
  <tr><td id="top">Form elements go here</td></tr>
  <tr><td>Buttons go here</td></tr>
</table>
</form>

И CSS: 

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

#top {
  height: 200px; /* Replace this with the appropriate height, or remove altogether. */
}

.buttons {
  height: 100%; /* Used to stretch the buttons to fill the element. */
}
0 голосов
/ 13 июля 2011

РЕДАКТИРОВАТЬ: Я только что понял, что это уместно, если использовать таблицы. Если используется div, тогда немного сложнее ... функция JavaScript для управления высотой нижнего элемента с помощью свойства style в элементе. Посмотрите на этот предыдущий вопрос , который может помочь с JavaScript

ОРИГИНАЛЬНЫЙ ОТВЕТ

Попробуйте вставить CSS для нижней половины приложения 

min-height:50%;

Тогда не указывайте высоту в верхней половине раздела.

Это будет означать, что нижняя половина с кнопками будет занимать не менее 50% площади экрана, способной увеличиваться по мере необходимости, а нижняя половина займет оставшуюся часть.

Лично я делаю это немного меньше, чем я ожидаю использовать, например. вместо 50% я могу использовать 30%, это означает, что я получаю максимальную отдачу от своего экрана, но это может не подходить для вашего приложения.

Надеюсь, это поможет; -)

0 голосов
/ 13 июля 2011

попробуйте что-то вроде этого: - 

<html style="height: 100%">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body style="height: 100%">
    <div id="top" style="background-color: #cccccc; height: 50%">form here</div>
    <div id="bottom" style="background-color: #eeeeee; height:50%">buttons here</div>
</body>

по существу, высота: 100% просто говорит, что div такой же большой, как его родитель, и это продолжает цепочку родителейобъекты.вы заметите, что если вы удалите height: 100% из тега html, все внутренние дочерние элементы просто свернутся.

hth

0 голосов
/ 13 июля 2011

HTML: 

<div id="c">
    <div id="topHalf"></div>
    <div id="bottomHalf"></div>
</div>

CSS: 

#c {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}
#topHalf, #bottomHalf {
    height: 50%;
    width: 100%;
    background: #00f;
}
#bottomHalf {
    background: #f00;
}

Вы можете разместить свои кнопки внутри нижней половины.

...