0
Просто быстро на по отношению к следующему адресу:Почему дочерний элемент «строка» не соответствует высоте родительского элемента «контейнер»?
Мой вопрос, почему, несмотря на следующий 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% от высоты? Я использовал гибкий ящик для центрирования шрифта в заголовке, но не могу сделать то же самое с крышкой ... Вот 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>
Спасибо, что делает все выглядит намного лучше! Однако у меня было несколько вопросов. Во-первых, почему 36 для шрифта? во-вторых, почему высота строки не соответствует высоте контейнера, несмотря на то, что класс установлен на 100%? – Mathias
Если вы оставите 45px в качестве размера шрифта и добавьте center_font, вы увидите, что он будет охватывать всю высоту контейнера, 36px будет ограничением на моем конце, чтобы сохранить только одну строку, но, как вам угодно, она может варьироваться в зависимости от вашего разрешающая способность. Учитывая, что вы использовали 1 строку в заголовке, я предположил, что вам понадобится также 1 строка, она также оставляет немного больше дышать для текста, в противном случае она будет очень плотной для изображений. :) – Syden