Position fixed height 100% ignores padding top/bottom

HTML & CSS
1

I’ve just made this test page as I’m creating a mobile sliding menu:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
	
		html,
		body { height: 100%; }
	
		body { margin: 0; }
		
		div {
			
			position: fixed;
			padding: 20px;
			border: 1px solid red;
			background-color: #EEEEEE;
			left: 0;
			height: 100%;
			width: 200px;
			overflow: scroll;
			
		}
		
		span {
			
			display: block;
			margin-left: 242px;
			overflow-x: hidden;
			
		}
	
	</style>
</head>
<body>
	<div>
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
	</div>
	<span>
		xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
		x<br />
	</span>
</body>
</html>

It seems if you add padding and a border to a 100% height position fixed element, the height doesn’t exceed the viewport height. It’s kind of a box-sizing hybrid as it does add padding and border to the width. This is great as it does what I want but just wanted to check: is that behaviour standard (i.e. part of the spec) throughout most browsers? I’ve tested on Safari, Chrome and FF and all seems good.

EDIT: It all works other than you can’t see the bottom border unless you add box-sizing: border-box;

2

Hi,

No its 42px too tall and sticks through the bottom of the viewport!

You could use box-sizing to force the issue or instead remove the height and just use top:0 and bottom :0.


div {
	position: fixed;
	padding: 20px;
	border: 1px solid red;
	background-color: #EEEEEE;
	left: 0;
	top:0;
	bottom:0;
	width: 200px;
	overflow:auto;
}

It’s not a good idea to apply that rule to all divs as that means you can’t ever use another div on your site lol :slight_smile: (unless that was just for your demo). The span shouldn’t have been used for the right column either as it should be a div. Use elements semantically and with their designated purpose in mind :slight_smile:

3

Bit of a silly question in hindsight.

Yeah, that was quick, dirty demo code. :slight_smile:

4

No worries I thought so :slight_smile: I just had to mention it… just in case :wink:

5