html/css bottom border missing
Question
The bottom border for the .block1 div and .block2 is missing. The .header has all borders, I tried .block and it has borders, but those 2 are missing just the bottom. I can't figure it out. Why is that?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.header
{
width: 1500px;
height: 100px;
border: 1px solid;
margin: 50px;
font-size: 36pt;
text-align: center;
}
.block
{
width: 1500px;
height: 300px;
margin: 80px 80px 80px 50px;
overflow: hidden;
}
.block1
{
width: 950px;
height: 100%;
border: 1px solid;
margin-right: 80px;
font-size: 12pt;
text-align: left;
float: left;
}
.block2
{
width: auto;
height: 100%;
border: 1px solid;
overflow: hidden;
font-size: 9pt;
}
</style>
</head>
<body>
<div class="header">
Header (36pt)
</div>
<div class="block">
<div class="block1">
Block1 (12pt)
</div>
<div class="block2">
Block2 (9pt)
</div>
</div>
</body>
</html>
2 answers
solution1
4 2014-06-16 20:13:10
Welcome to CSS Box Model!
This is because borders ADD TO the width/height you have set on elements (as does padding).
since .block is 300px tall, and .block1 and .block2 are 100%, with the 1px border, they are actually 302px tall.
and since you have overflow:hidden on .block it is clipping the border.
box-sizing:border-box makes box model and sizing behave more logically.
solution2
3 ACCPTED
Change
overflow: hidden;
To:
overflow: visible;
change that in .block
.block1 and .block2 togather with their border are 302px so you could also change the height of .block to 302px or more
JSFiddle:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.