gpt4 book ai didi

html - 使用 flex 在没有设置宽度的情况下向下推送内容

转载 作者:行者123 更新时间:2023-11-28 16:06:14 25 4
gpt4 key购买 nike

有人可以帮助我使用 flex 来向下压我的页脚/扩展内容以适应吗?

https://jsfiddle.net/9xjy78gj/

希望从网站上可以清楚地看到我的问题是什么。

我只想使用 flex 将页脚向下推并适当扩展内容 div,如果可能的话,不使用内容 div 的设置高度等?

非常感谢!

HTML

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="page_wrap">
<header>
<a href="/">
<h1>Close<span><i class="fa fa-map-marker" aria-hidden="true"></i></span>Range</h1>
</a>
<hr />
</header>

<div id="refinement">
<form>
<div class="form_component">
<select id="narrow">
<option value="select" selected disabled>Please Select</option>
</select>
</div>
<div class="form_component">
<input id="driving" type="radio" name="travelmode" value="Driving" checked /> <i class="fa fa-car" aria-hidden="true"></i>
</div>
<div class="form_component">
<input id="walking" type="radio" name="travelmode" value="Walking" /> <i class="fa fa-male" aria-hidden="true"></i>
</div>
</form>
</div>
<div id="jquery_placeholder">
<!-- JQuery loads PHP output into here-->
</div>
<div id="place_results_wrap">
<!-- and here -->
<div id="content">
<h2>Let's explore!</h2>
<i class="fa fa-globe" aria-hidden="true"></i>
</div>
</div>
<footer class="footer">
<div id="google">
<img src="/assets/i/google.png" alt="Powered by Google" />
</div>
</footer>
</div>
</body>
</html>

CSS

a, a:hover
{
text-decoration: none;
}

body
{
font-family: 'Open Sans', sans-serif;
background: #ECECEA;
font-size:16px;
}

#page_wrap
{
width:100%;
}

header
{
background: #fff;
text-align: center;
padding: 1.250em;
}

header h1
{
font-size: 6em;
font-weight: 400;
color: #655e5e;
margin: 0;
display: inline-block;
}

@media screen and (max-width: 550px)
{
header h1 {
font-size: 3em;
}

}

header hr
{
max-width: 36em;
margin-bottom: 0px;
}

header .fa-map-marker
{
color: #ec3b3b;
font-size: 1.2em;
}

#refinement
{
padding: 0.5em 1.25em 1.25em;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
}

#refinement form
{
display: flex;
justify-content: center;
}

.form_component
{
margin: 0 0.4em;
display: none;
}

.form_component i.fa
{
font-size: 1.4em;
color: #655e5e;
}

#content
{
text-align: center;
background: #655e5e;
padding: 1.25em;
}
#content h2
{
color: #fff;
font-weight: 400;
font-size: 4em;
margin: 0;
}


@media screen and (max-width: 415px) {

#content h2
{
font-size:2em;
}

}

#content i.fa-globe
{
font-size: 18em;
color: #fff;
}

.place_results
{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
padding: 1.25em 0;
}

.next_page
{
padding: 0 1.250em;
width: 100%;
text-align: center;
}

.next_page button
{
background-color: #fff;
border: none;
color: #655e5e;
padding: 0.3125em 2em;
text-decoration: none;
display: inline-block;
font-size: 1em;
font-weight: 600;
cursor: pointer;
border-radius: 1.25em;
}
.next_page button:hover
{
background-color: #f6f6f6;
}

.place
{
width: 24em;
height: 27em;
margin: 1.25em;
display: flex;
flex-direction: column;
-webkit-box-shadow: 5px 6px 20px 0px rgba(158,155,158,0.75);
-moz-box-shadow: 5px 6px 20px 0px rgba(158,155,158,0.75);
box-shadow: 5px 6px 20px 0px rgba(158,155,158,0.75);
background: #fff;
}

@media screen and (max-width: 1920px) {

.place
{
width: 30%;
}

}

@media screen and (min-width: 900px)
and (max-width: 1366px){

.place
{
width: 45%;
}

}


@media screen and (min-width: 768px)
and (max-width: 1366px){

.place
{
width: 44%;

}

}

@media screen and (min-width: 415px)
and (max-width: 760px){

.place
{
width: 90%;

}

}



@media screen and (max-width: 415px) {

.place
{
width: 90%;
}

}

.place_image
{

width: 100%;
height: 14.0625em;
background-size: cover !important;
background-clip: content-box !important;
}

.place_description
{
padding: 0.625em;
display: flex;
flex-direction: column;
flex: 1 1 0;
background: #fff;
}

.distance_container p.distance
{
font-weight:600;
}

.place_description p, .place_description a
{
color: #655e5e;
font-weight: 400;
margin: 0;
}

.place_description .place_open p
{
margin: 0;
color: #49b51c;
}

.place_description i.fa
{
width: 1.25em;
}

.place_title
{
flex: 1 1 0;
}

.place_title h3
{
color: #655e5e;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
margin: 0;
font-size: 1.4em;
line-height: 1.3;
}

@media screen and (max-width: 415px) {

.place_title h3
{
font-size: 1.2em;
}

}


.rating_container
{
width: 100%;
}

.rating_bar {

width: 6.875em;
height: 1.313em;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star-rating-sprite.png);
background-repeat: repeat-x;
background-position: 0 0;
}
.rating {
height: 1.313em;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star-rating-sprite.png);
background-position: 0 100%;
background-repeat: repeat-x;
}

.place_description .place_location
{
margin-bottom: 0.625em;
}

.place .distance_container, .place .vicinity_container, .place .place_phone_container
{
display: flex;
}

#load_container
{
padding: 1.25em;
text-align: center;
}

#load i.fa-spin
{
font-size: 4em;
color: #ec3b3b;
}

#jquery_placeholder
{
display:none;
width:100%;
}

footer
{
padding: 1.25em;
text-align: right;
background: #fff;
}

footer #google img
{
width: 10em;
}

#error
{
padding: 1.25em;
background: #ec3b3b;
}

#error p
{
font-size: 1.2em;
margin: 0;
color: #fff;
text-align: center;
}

#error i.fa-exclamation-circle
{
color: #fff;
}

最佳答案

Flexbox 可以做到这一点提供你像这样使用flex-direction:column:

如果您不想扩展部分以占用空闲空间,只需删除 flex:1

html,
body {
height: 100%;
}
body {
min-height: 100%;
text-align: center;
/* for demo */
}
.page-wrap {
min-height: 100%;
display: flex;
flex-direction: column;
}
header {
background: pink;
}
footer {
background: rebeccapurple;
color: #fff;
}
aside {
flex: 1;
background: orange;
}
main {
flex: 1;
background: grey;
}
<div class="page-wrap">
<header>
<h1>Header</h1>
</header>
<aside>I'm a secondary header</aside>
<main>I'm main content</main>
<footer>
<h1>Footer</h1>
</footer>
</div>

关于html - 使用 flex 在没有设置宽度的情况下向下推送内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39183277/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com