использовать позицию липкой на нижнем элементе без тега обертки - тег тела всегда является родительским [дубликат]
Многие объяснения уже присутствуют, чтобы объяснить, как это происходит и как это исправить, но вы также должны следовать рекомендациям, чтобы избежать NullPointerException вообще.
См. также: A хороший список лучших практик
Я бы добавил, очень важно, хорошо использовать модификатор final. Использование "окончательной" модификатор, когда это применимо в Java
Сводка:
- Используйте модификатор
finalдля обеспечения хорошей инициализации. - Избегайте возврата null в методы, например, при возврате пустых коллекций.
- Использовать аннотации
@NotNullи@Nullable - Быстрое завершение работы и использование утверждений, чтобы избежать распространения нулевых объектов через все приложение, когда они не должен быть пустым.
- Сначала используйте значения с известным объектом:
if("knownObject".equals(unknownObject) - Предпочитают
valueOf()поверх toString (). - Используйте null safe
StringUtilsStringUtils.isEmpty(null).
5 ответов
Обновить
Простой способ сделать это для современных браузеров (2015) с помощью display:flex:
html,
body {height:100%; padding:0; margin:0; width:100%;}
body {display:flex; flex-direction:column;}
#main {flex-grow:1;}
/* optional */
header {min-height:50px; background:green;}
#main {background:red;}
footer {min-height:50px; background:blue;} <header>header</header>
<div id="main" role="main">content</div>
<footer>footer</footer>
Вышеприведенное позволяет как для фиксированной высоты, так и для нижнего колонтитула (просто добавьте высоту в стили), а также переменную высоту (как показано в настоящее время - можно изменить в зависимости от содержимого верхнего и нижнего колонтитула) с содержимым, занимающим остальную часть пространства.
Если содержимое больше, чем документ, нижний колонтитул будет нажат вниз.
Обновить
Есть несколько способов сделать это с чистым css. В основном вам нужно начинать с структуры html следующим образом:
<div id="wrapper">
<div class="top"></div>
<div class="middle">
<div class="container">
</div>
</div>
<div class="bottom"></div>
</div>
Версия 1 использует граничную рамку, поэтому она не будет совместима со старыми браузерами (и вам может потребоваться добавить moz, webkit и ms prefixes, чтобы заставить его работать во всех браузерах):
html,
body { height: 100%; margin: 0; padding: 0; }
#wrapper { padding: 100px 0 75px 0; height: 100%; box-sizing: border-box; }
.middle { min-height: 100%; position: relative; }
.top { margin-top: -100px; height: 100px; }
.bottom { margin-bottom: -75px; height: 75px; }
.container { padding: 10px; }
Версия 1 Версия 1 с содержимым Вертикальный столбец версии 1
Версия 1 использует абсолютное позиционирование
html,
body {min-height:100%; padding:0; margin:0;}
#wrapper {padding:50px 0; position:absolute; top:0; bottom:0; left:0; right:0;}
.middle {min-height:100%;}
.top {margin-top:-50px; height:50px;}
.bottom {margin-bottom:-50px; height:50px;}
.container {padding:10px;}
Версия 1 Версия 2 с контентом Версия 1 с контентом
Версия 3 слегка изменяет html, но более надежна, если у вас есть верхний и нижний колонтитулы переменной высоты:
<div id="wrapper">
<div class="table">
<div class="top row"><div class="cell"></div></div>
<div class="middle row"><div class="container cell"></div></div>
<div class="bottom row"><div class="cell"></div></div>
</div>
</div>
Css
html,
body {min-height:100%; padding:0; margin:0;}
#wrapper {position:absolute; top:0; bottom:0; left:0; right:0;}
.table {display:table; width:100%; height:100%;}
.row {display:table-row;}
.cell {display:table-cell;}
.middle {height:100%;}
.container {padding:10px;}
Версия 2 с контентом Версия 3 с разным верхним и нижним колонтитулами высоты Столбец с колонкой [1] Версии 1 Столбец с колонкой [3]
-
1также может работать с использованием%, Header 2%, Middle 96%, Bottom 2% – Engineeroholic 7 September 2015 в 02:37
-
2Спасибо за ваши примеры. Однако у меня есть один вопрос: в версии 1 или 2, как я могу сделать элемент контейнера также 100% в высоту. Кажется, что он меняет размер по контенту, но мне также нужно, чтобы он всегда был полной. Кажется, это не понятно. – 5earch 24 November 2015 в 10:17
-
3@ 5earch, к сожалению, в первых двух версиях вы не сможете иметь контейнер на 100%, так как вам понадобится середина для установки высоты вместо минимальной высоты, что означает, что ваш макет сломается. Любая причина, по которой вы не можете использовать flex: jsfiddle.net/tsao203b ? – Pete 24 November 2015 в 11:15
-
4Из того, что я видел, Flex поддерживается только в IE 10 и выше. Мы все равно должны поддерживать IE 9. Жаль, что альтернативы нет, я думаю, мне просто нужно сделать это без нижнего колонтитула. В любом случае спасибо. – 5earch 24 November 2015 в 13:01
-
5@ 5earch В чем причина того, что для #middle и container 100%? – Pete 24 November 2015 в 13:33
Я очень удивлен, что никто не знает, как его решить с помощью чистого CSS и хорошей поддержки браузера (без каких-либо calc () - это хороший метод, но на самом деле это очень рано использовать)
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Content</title>
<link media="all" rel="stylesheet" type="text/css" href="css/all.css" />
<!--[if lt IE 8]><link rel="stylesheet" type="text/css" href="css/ie.css" media="screen"/><![endif]-->
</head>
<body>
<div id="wrapper">
<div class="w1">
<div class="w2">
<p>content of the page</p>
</div>
</div>
<div id="footer">
<div class="holder">
<div class="frame">
<p>footer content</p>
</div>
</div>
</div>
</div>
</body>
</html>
HTML
html{height:100%;}
body{
margin:0;
height:100%;
text-align:center;
}
p{margin:0 0 10px;}
#wrapper{
width:100%;
height:100%;
display:table;
margin:0 auto;
}
.w1{
width:100%;
display:table-row;
background:#0ff;
}
#header {background: #ccc;}
#footer{
width:100%;
overflow:hidden; /*for FF on Windows 7*/
display:table-footer-group;
}
#footer .holder{
height:1%;
display:table-row;
background:#f00;
}
#footer .frame{display:table-cell;}
Итак, я создал Fiddle
Если вы хотите сделать это через jQuery, вы можете использовать Something Like this
window.onload = function() {
var height = screen.height;
var ele = document.getElementById("yourblockid");
ele.style.height = screen.height-2 + "px";
};
. Этот скрипт поставит высоту равной высоте div,
. Это полезно для вас, или вы пытаетесь спросить что-то еще?
-
1
Единственный способ сделать это с чистым css - использовать функцию css calc ():
#content {
height:calc(100% - 250px);
}
Где 250px - это высота вашего заголовка + нижний колонтитул в сочетании.
Вы можете использовать абсолютное позиционирование.
- Имейте абсолютно позиционированный контейнер с значениями
topиbottom, равными высоте верхнего и нижнего колонтитула соответственно, это растянет контейнер на оставшуюся высоту - У родителя
inline-blockвнутри есть100%height - Применить
text-align:centerдля родителя, чтобы выровнять дочернийinline-blockдо центра
HTML
<div id='container'>
<div><div>
</div>
CSS
*{
margin:0;
padding:0;
}
html,body{
height:100%;
text-align:center;
}
#container{
position:absolute;
top:50px; /*height of header*/
width:100%;
bottom:50px; /*height of footer*/
background:white;
text-align:center;
}
#container div{
display:inline-block;
min-width:200px;
height:100%;
background:dodger blue;
}
Или если совместимость с браузером не проблема, вы можете использовать функцию css3 calc(), как еще один ответ указал