为什么子元素“行”与父元素“容器”的高度不匹配？
[英]Why does child element “row” not match height of parent element “container”?
问题描述
Just a quick on in relation to the following site: 
只需快速浏览以下站点：
christmas.drcrittall.com christmas.drcrittall.com
My question, is why despite the following CSS: 我的问题是，为什么要使用以下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%;
}
Does the row within #cap and #head not fill 100% of the height? #cap和#head中的行是否不填充高度的100％？ I have used flex box to center the font within the header, but can not seem to do the same with the cap... Here is the HTML: 我已经使用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>
1 个解决方案
解决方案1
1 已采纳 2016-12-12 20:54:53
Font size is too big and collapses the offset columns, and you are missing center_font class on #cap . 字体大小太大，崩塌偏移列，你缺少center_font阶级#cap 。
- Add
center_fontclass to#cap.将center_font类添加到#cap。 - Change
font-sizefrom45pxto less or equal than36pxonfont#dear.ammendto keep 1 line of text ("Love from Matthew").更改font-size从45px到小于或等于比36px的font#dear.ammend保持1行文字（“马太福音爱”）。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
为什么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?
使子元素的高度/宽度完全匹配父元素 - Make child element height/width match parent exactly
为什么元素的负底部边距会降低该元素的父级高度？ - Why does a negative bottom margin on an element decrease the height of parent of that element?
子元素改变父元素高度（css） - Child element changing parent element height (css)
为什么子元素 <img /> 父div的宽度和高度中不包含？ - why child element <img /> not contains in the parent div width and height?
为什么子元素没有占据其父元素的 100% 高度？ - Why is child element not taking 100% height of its parent?
通过父级高度+父级伪元素绑定的子级 - Bound Child By Height of Parent + Parent Pseudo Element
内部元素不扩展父级高度元素 - Inner element does not extends parent height element
父级div（未设置高度）是否将高度过大了几个像素以适合子img元素的高度？ 为什么？ - Parent div, height not set, over-sizes height by a few pixels to fit child img element height? Why?
相关标签