An arbibrary hight on header + rest of the height on container [duplicate]

-1

This question already has an answer here:

Make a div fill the height of the remaining screen space

31 answers

Fill remaining vertical space with CSS using display:flex

3 answers

I want to achieve the following behavior like in the image

enter image description here

So, I have a header with an arbitrary height and I want the container to fill the rest of the space. I have the following code:

<body>
 <div class="header">
 My header<br> Arbitrary height (ex: 123px)
 </div>

 <div class="container">
 Container <br> Height = rest of the viewport
 </div>
</body>

Note: I don't want to use .container height: calc(100% - 123px) because the in the future 123px may change, so I don't want to modify in two places.

asked Nov 13 '18 at 9:19

MTZ

5512

marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function()
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();

);
);
);
Nov 13 '18 at 9:25

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

you need to consider the questions you get as related while writing yours ... the first one was the one you need

– Temani Afif
Nov 13 '18 at 9:26

You're right, sorry

– MTZ
Nov 13 '18 at 9:39

add a comment |

-1

This question already has an answer here:

Make a div fill the height of the remaining screen space

31 answers

Fill remaining vertical space with CSS using display:flex

3 answers

I want to achieve the following behavior like in the image

enter image description here

So, I have a header with an arbitrary height and I want the container to fill the rest of the space. I have the following code:

<body>
 <div class="header">
 My header<br> Arbitrary height (ex: 123px)
 </div>

 <div class="container">
 Container <br> Height = rest of the viewport
 </div>
</body>

Note: I don't want to use .container height: calc(100% - 123px) because the in the future 123px may change, so I don't want to modify in two places.

asked Nov 13 '18 at 9:19

MTZ

5512

marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function()
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();

);
);
);
Nov 13 '18 at 9:25

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

you need to consider the questions you get as related while writing yours ... the first one was the one you need

– Temani Afif
Nov 13 '18 at 9:26

You're right, sorry

– MTZ
Nov 13 '18 at 9:39

add a comment |

-1

This question already has an answer here:

Make a div fill the height of the remaining screen space

31 answers

Fill remaining vertical space with CSS using display:flex

3 answers

I want to achieve the following behavior like in the image

enter image description here

So, I have a header with an arbitrary height and I want the container to fill the rest of the space. I have the following code:

<body>
 <div class="header">
 My header<br> Arbitrary height (ex: 123px)
 </div>

 <div class="container">
 Container <br> Height = rest of the viewport
 </div>
</body>

Note: I don't want to use .container height: calc(100% - 123px) because the in the future 123px may change, so I don't want to modify in two places.

asked Nov 13 '18 at 9:19

MTZ

5512

This question already has an answer here:

Make a div fill the height of the remaining screen space

31 answers

Fill remaining vertical space with CSS using display:flex

3 answers

I want to achieve the following behavior like in the image

enter image description here

So, I have a header with an arbitrary height and I want the container to fill the rest of the space. I have the following code:

<body>
 <div class="header">
 My header<br> Arbitrary height (ex: 123px)
 </div>

 <div class="container">
 Container <br> Height = rest of the viewport
 </div>
</body>

Note: I don't want to use .container height: calc(100% - 123px) because the in the future 123px may change, so I don't want to modify in two places.

This question already has an answer here:

Make a div fill the height of the remaining screen space

31 answers

Fill remaining vertical space with CSS using display:flex

3 answers

css

asked Nov 13 '18 at 9:19

MTZ

5512

asked Nov 13 '18 at 9:19

MTZ

5512

asked Nov 13 '18 at 9:19

MTZ

5512

asked Nov 13 '18 at 9:19

MTZ

5512

asked Nov 13 '18 at 9:19

MTZ

5512

marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function()
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();

);
);
);
Nov 13 '18 at 9:25

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function()
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();

);
);
);
Nov 13 '18 at 9:25

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

you need to consider the questions you get as related while writing yours ... the first one was the one you need

– Temani Afif
Nov 13 '18 at 9:26

You're right, sorry

– MTZ
Nov 13 '18 at 9:39

add a comment |

you need to consider the questions you get as related while writing yours ... the first one was the one you need

– Temani Afif
Nov 13 '18 at 9:26

You're right, sorry

– MTZ
Nov 13 '18 at 9:39

you need to consider the questions you get as related while writing yours ... the first one was the one you need

– Temani Afif
Nov 13 '18 at 9:26

You're right, sorry

– MTZ
Nov 13 '18 at 9:39

add a comment |

2 Answers
2

active

oldest

votes

See following example:

<!DOCTYPE html>
<html>
<head>
	<title></title>
 <style>
 html,
	body 
	 height: 100%;
	
	body 
	 min-height: 100%;
	 display: flex;
	 flex-direction: column;
	 padding:0;
	 margin:0;
	
	.container 
	 flex: 1;
	 overflow:auto;
	 padding:10px;
	
	.header 
	 background-color:green;
	
 </style>
</head>
<body>
 <div class="header">
 <p>My header<br> Arbitrary height (ex: 123px)</p>
 <p>My header<br> Arbitrary height (ex: 123px)</p>
 </div>

 <div class="container">
 Container <br> Height = rest of the viewport
 </div>
</body>
</html>

answered Nov 13 '18 at 9:25

Hanif

2,6141611

add a comment |

You can use flexbox for this:

html 
 height: 100%;


body 
 min-height: 100%;
 margin: 0;
 display: flex;
 flex-direction: column;


.header 
 height: 123px; /* whatever height you want */
 background:green;


.container 
 flex-grow: 1;
 background:beige;

<div class="header"></div>
<div class="container"></div>

answered Nov 13 '18 at 9:23

Pete

40.8k1875116

add a comment |

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

See following example:

<!DOCTYPE html>
<html>
<head>
	<title></title>
 <style>
 html,
	body 
	 height: 100%;
	
	body 
	 min-height: 100%;
	 display: flex;
	 flex-direction: column;
	 padding:0;
	 margin:0;
	
	.container 
	 flex: 1;
	 overflow:auto;
	 padding:10px;
	
	.header 
	 background-color:green;
	
 </style>
</head>
<body>
 <div class="header">
 <p>My header<br> Arbitrary height (ex: 123px)</p>
 <p>My header<br> Arbitrary height (ex: 123px)</p>
 </div>

 <div class="container">
 Container <br> Height = rest of the viewport
 </div>
</body>
</html>

answered Nov 13 '18 at 9:25

Hanif

2,6141611

add a comment |

See following example:

<!DOCTYPE html>
<html>
<head>
	<title></title>
 <style>
 html,
	body 
	 height: 100%;
	
	body 
	 min-height: 100%;
	 display: flex;
	 flex-direction: column;
	 padding:0;
	 margin:0;
	
	.container 
	 flex: 1;
	 overflow:auto;
	 padding:10px;
	
	.header 
	 background-color:green;
	
 </style>
</head>
<body>
 <div class="header">
 <p>My header<br> Arbitrary height (ex: 123px)</p>
 <p>My header<br> Arbitrary height (ex: 123px)</p>
 </div>

 <div class="container">
 Container <br> Height = rest of the viewport
 </div>
</body>
</html>

answered Nov 13 '18 at 9:25

Hanif

2,6141611

add a comment |

See following example:

<!DOCTYPE html>
<html>
<head>
	<title></title>
 <style>
 html,
	body 
	 height: 100%;
	
	body 
	 min-height: 100%;
	 display: flex;
	 flex-direction: column;
	 padding:0;
	 margin:0;
	
	.container 
	 flex: 1;
	 overflow:auto;
	 padding:10px;
	
	.header 
	 background-color:green;
	
 </style>
</head>
<body>
 <div class="header">
 <p>My header<br> Arbitrary height (ex: 123px)</p>
 <p>My header<br> Arbitrary height (ex: 123px)</p>
 </div>

 <div class="container">
 Container <br> Height = rest of the viewport
 </div>
</body>
</html>

answered Nov 13 '18 at 9:25

Hanif

2,6141611

See following example:

<!DOCTYPE html>
<html>
<head>
	<title></title>
 <style>
 html,
	body 
	 height: 100%;
	
	body 
	 min-height: 100%;
	 display: flex;
	 flex-direction: column;
	 padding:0;
	 margin:0;
	
	.container 
	 flex: 1;
	 overflow:auto;
	 padding:10px;
	
	.header 
	 background-color:green;
	
 </style>
</head>
<body>
 <div class="header">
 <p>My header<br> Arbitrary height (ex: 123px)</p>
 <p>My header<br> Arbitrary height (ex: 123px)</p>
 </div>

 <div class="container">
 Container <br> Height = rest of the viewport
 </div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title></title>
 <style>
 html,
	body 
	 height: 100%;
	
	body 
	 min-height: 100%;
	 display: flex;
	 flex-direction: column;
	 padding:0;
	 margin:0;
	
	.container 
	 flex: 1;
	 overflow:auto;
	 padding:10px;
	
	.header 
	 background-color:green;
	
 </style>
</head>
<body>
 <div class="header">
 <p>My header<br> Arbitrary height (ex: 123px)</p>
 <p>My header<br> Arbitrary height (ex: 123px)</p>
 </div>

 <div class="container">
 Container <br> Height = rest of the viewport
 </div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title></title>
 <style>
 html,
	body 
	 height: 100%;
	
	body 
	 min-height: 100%;
	 display: flex;
	 flex-direction: column;
	 padding:0;
	 margin:0;
	
	.container 
	 flex: 1;
	 overflow:auto;
	 padding:10px;
	
	.header 
	 background-color:green;
	
 </style>
</head>
<body>
 <div class="header">
 <p>My header<br> Arbitrary height (ex: 123px)</p>
 <p>My header<br> Arbitrary height (ex: 123px)</p>
 </div>

 <div class="container">
 Container <br> Height = rest of the viewport
 </div>
</body>
</html>

answered Nov 13 '18 at 9:25

Hanif

2,6141611

answered Nov 13 '18 at 9:25

Hanif

2,6141611

answered Nov 13 '18 at 9:25

Hanif

2,6141611

answered Nov 13 '18 at 9:25

Hanif

2,6141611

add a comment |

You can use flexbox for this:

html 
 height: 100%;


body 
 min-height: 100%;
 margin: 0;
 display: flex;
 flex-direction: column;


.header 
 height: 123px; /* whatever height you want */
 background:green;


.container 
 flex-grow: 1;
 background:beige;

<div class="header"></div>
<div class="container"></div>

answered Nov 13 '18 at 9:23

Pete

40.8k1875116

add a comment |

You can use flexbox for this:

html 
 height: 100%;


body 
 min-height: 100%;
 margin: 0;
 display: flex;
 flex-direction: column;


.header 
 height: 123px; /* whatever height you want */
 background:green;


.container 
 flex-grow: 1;
 background:beige;

<div class="header"></div>
<div class="container"></div>

answered Nov 13 '18 at 9:23

Pete

40.8k1875116

add a comment |

You can use flexbox for this:

html 
 height: 100%;


body 
 min-height: 100%;
 margin: 0;
 display: flex;
 flex-direction: column;


.header 
 height: 123px; /* whatever height you want */
 background:green;


.container 
 flex-grow: 1;
 background:beige;

<div class="header"></div>
<div class="container"></div>

answered Nov 13 '18 at 9:23

Pete

40.8k1875116

You can use flexbox for this:

html 
 height: 100%;


body 
 min-height: 100%;
 margin: 0;
 display: flex;
 flex-direction: column;


.header 
 height: 123px; /* whatever height you want */
 background:green;


.container 
 flex-grow: 1;
 background:beige;

<div class="header"></div>
<div class="container"></div>

html 
 height: 100%;


body 
 min-height: 100%;
 margin: 0;
 display: flex;
 flex-direction: column;


.header 
 height: 123px; /* whatever height you want */
 background:green;


.container 
 flex-grow: 1;
 background:beige;

<div class="header"></div>
<div class="container"></div>

html 
 height: 100%;


body 
 min-height: 100%;
 margin: 0;
 display: flex;
 flex-direction: column;


.header 
 height: 123px; /* whatever height you want */
 background:green;


.container 
 flex-grow: 1;
 background:beige;

<div class="header"></div>
<div class="container"></div>

answered Nov 13 '18 at 9:23

Pete

40.8k1875116

answered Nov 13 '18 at 9:23

Pete

40.8k1875116

answered Nov 13 '18 at 9:23

Pete

40.8k1875116

answered Nov 13 '18 at 9:23

Pete

40.8k1875116

add a comment |

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Odtnhj