Css: высота элемента в 100% — 100px

05, 12, 2015
bullgare
HTML and CSS
Comments: 2

Да, calc-ом оно делается ровно так (100%-100px).
Но его не все браузеры до сих пор умеют, так что вот ещё один способ:

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

<body>

</body>

body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

.header {
	width: 100%;
	height: 100px;
	background-color: blue;
	box-sizing: border-box;
	padding: 0;
}

.main {
	position: absolute;
	top: 100px;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: red;
}

body {

width: 100%;

height: 100%;

margin: 0;

padding: 0;

}

.header {

width: 100%;

height: 100px;

background-color: blue;

box-sizing: border-box;

padding: 0;

}

.main {

position: absolute;

top: 100px;

right: 0;

bottom: 0;

left: 0;

background-color: red;

}

JS Bin

Css: высота элемента в 100% — 100px

Similar Posts

2 Responses so far.

LEAVE A COMMENT Отменить ответ