[英]Why does child element “row” not match height of parent element “container”?
只需快速浏览以下站点：
我的问题是，为什么要使用以下CSS：
html, body {
height:100%;
}
/* Background image for website */
body {
/*background: url("images/crumpled.jpg") no-repeat center center fixed;*/
background: url("../img/crumpled.jpg") no-repeat;
background-size: 100% 100%;
/*margin-bottom:5%;*/
}
#header {
height:20%;
border-style: solid;
border-color:red;
/*padding:0px; */
}
#middle {
height:60%;
/* border-style: solid;
border-color:green;*/
}
#cap {
height:20%;
border-style: solid;
border-color:blue;
/* Previously the click here text was overflowing out of this div. See here to see how to deal with this: https://css-tricks.com/almanac/properties/o/overflow/ */
/*overflow:auto;*/.
}
#form {
min-height:20%; /* Setting min-height of white-space beneath body enables container to expand with the form as it gets bigger */
display:none; /* This div is initially hidden until click button which activates jquery animation */
}
#main_image {
max-width:100%;
max-height:60vh; /*Set max and min heights to 60vh to lock within this container ie stop images expanding out */
min-height:60vh;
}
#candle_image {
width:100%;
height:100%;
}
#top_paper {
width:100%;
max-height:100%;
}
/* Make row height and columns fill entire height of containers */
.row, .col-md-6, .col-md-4, .col-md-6, .col-md-12, .col-md-8, .col-md-2, .col-md-3, {
height:100%;
}
#cap和#head中的行是否不填充高度的100％？ 我已经使用flex框将字体放在标题的中心，但是似乎无法对字体进行相同的操作……这是HTML：
<body>
<div class = "container-fluid center_font" id = "header">
<div class = "row" style = "border-style: solid; border-color:black;">
<div class = "col-md-12 col-xs-12">
<font id = "dear"> Merry Christmas! </font>
</div>
</div>
</div>
<div class = "container-fluid center_font" id = "middle">
<div class = "row"><!-- style = "border-style:solid; border-color:black;">-->
<div class = "col-md-3" id = "holly_1" style = "padding-top:10%;">
<img src = "../img/candles.png" id = "candle_image" class = "img-fluid">
</div>
<div class = "col-md-6 col-xs-12 center_font"><!-- style = "border-style:solid; border-color:yellow;">-->
<img src = "" id = "main_image" class = "img-circle">
</div>
<div class = "col-md-3" id = "holly_2" style = "padding-top:10%;">
<img src = "../img/candles.png" id = "candle_image" class = "img-fluid">
</div>
</div>
</div>
<div class = "container-fluid" id = "cap"><!-- style = "border-style:solid; border-color:green;">-->
<div class = "row" style = "border-style: solid; border-color:black;">
<div class = "col-md-offset-3 col-md-6 col-xs-12 center_font">
<font class = "ammend" id = "dear" style = "font-size:45px;"> Love from Matthew</font><br>
<!--<a href = "#" id = "reveal">
<font id = "dear" class = "fiddle" style = "font-size: 20px;">Click Me</font>
</a>
-->
</div>
<div class = "col-md-offset-3 col-md-6 col-xs-12 center_font">
<a href = "#" id = "reveal">
<font id = "dear" class = "fiddle" style = "font-size: 20px;">Click Me</font>
</a>
</div>
</div>
</div>
</body>
字体大小太大，崩塌偏移列，你缺少center_font阶级#cap 。
center_font类添加到#cap 。 font-size从45px到小于或等于比36px的font#dear.ammend保持1行文字（“马太福音爱”）。
为什么display：table将父元素的高度设置为其最大的浮动子元素的高度？
[英]Why does display:table set the parent element's height to its biggest floating child element's height?
为什么当父元素具有最小高度/最大高度值但没有高度值时，子元素的 height: 100% 不适用？
[英]Why does height: 100% on a child element not apply when the parent element has a min-height/max-height value but no height value?
为什么元素的负底部边距会降低该元素的父级高度？
[英]Why does a negative bottom margin on an element decrease the height of parent of that element?
为什么子元素 <img /> 父div的宽度和高度中不包含？
[英]why child element <img /> not contains in the parent div width and height?
父级div（未设置高度）是否将高度过大了几个像素以适合子img元素的高度？ 为什么？
[英]Parent div, height not set, over-sizes height by a few pixels to fit child img element height? Why?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.