Height - (Padding * 2) results in overflow

HTML & CSS
1

You have answered this guy’s question:
https://www.sitepoint.com/community/t/specific-fill-remaining-width/

I tried adding 2% padding and removing 4% of height to equalize top and bottom, but to no avail.

It seems that height of 96% and padding of 2%, leaving it 96% height and 4% padding = 100%, still results in overflow. I need exactly what that man needs, except well, it doesn’t padding right.

2

Hi there h2493117,

and a warm welcome to these forums. :sunglasses:

Please show us your problematic code.

coothead

3

(wink wink)
Uh. It’s in your own answer. The answer to question to which link I provided, is good. But as soon as I add 2% padding top and bottom, and remove 4% of height, which should be 100%. While it should fit perfectly on page, it create an overflow.

The problem is not in code, it’s in concept. Element:

element {
	height: 96%;
	padding: 2%;
}

Should be perfectly 100% tall to it’s parent. But instead creates an overflow.
The situation is explained in the link that I provided (points to another thread on here).

4

Padding in %, including top/bottom padding is based on % of the element width, not height.

2 Likes
5

REALLY?!

I thought padding: 1%, meant “add 1% of element’s height to top, add 1% of element’s width to right etc.”

Whoa…

Well then, how else can I create “some space”. Elements without padding don’t look as quite as good.

6

Hi there h2493117,

here is a basic example…

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
html,body {
    height: 100%;
    margin: 0;
 }
div {
    min-height: 100%;
    padding: 4%;
    border: 0.5em solid #630;
    background-color: #fc9;
    box-sizing: border-box;
    box-shadow: inset 0 0 2em #210;
 }
</style>
</head>
<body> 
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero 
bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh, 
posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat. 
Curabitur et volutpat nibh. Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta, 
sapien nec molestie molestie, odio magna vestibulum lorem, vitae feugiat est leo sit amet 
nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac magna sed, pretium commodo 
odio. Sed porttitor augue velit, quis placerat diam sodales ac. Curabitur vitae porta ex. 
Praesent rutrum ex fringilla tellus tincidunt interdum. Proin molestie lectus consectetur 
purus aliquam porttitor. Fusce ac nisi ac magna scelerisque finibus a vitae sem.
</p>
</div>
</body>
</html>

coothead

4 Likes
7

box-sizing: border-box; was the solution. Thanks. I never knew such property existed. New possibilities!

8

 
 
    No problem, you’re very welcome. :blush:

coothead

1 Like
9

No, it’s a common mistake and all padding and margins in percentage are based on the width of the containing block and nothing to do with the height even for vertical padding/margin.

Note that coothead used min-height:100% and not height:100% as generally you don’t want to limit an elements height. (Of course it all depends on situation and what you want to achieve.)

3 Likes
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.