My intention is to place a div-container inside a div-container, but it isn't working atm. My div-container which should be placed at the bottom sticks to the bottom of the whole page.
我的意图是在div容器中放置一个div容器,但它不能正常工作。我应该放在底部的div容器粘在整个页面的底部。
.info-container {
display: flex;
margin: 0 0 0 auto;
max-width: 450px;
max-height: 400px;
width: 100%;
height: 100%;
box-shadow: 0px 0px 38px 0px rgba(0, 0, 0, 0.36);
background-color: yellow;
}
div.info-header {
position: relative;
display: flex;
flex-direction: column;
width: 470px;
background: url('../img/infoheader.png') no-repeat;
background-position: auto auto;
height: 100px;
box-sizing: border-box;
}
div.info-header h3 {
font-family: 'SignPanter', sans-serif !important;
text-decoration: none;
font-size: 32px;
color: white;
font-weight: 200;
text-shadow: 1px 1px #747474;
text-align: center;
}
div.info-bottom-text:hover {
color: white;
text-shadow: 1px 1px #747474;
}
.info-bottom {
display: flex;
align-items: flex-end;
position: absolute;
bottom: 0px;
}
<div class="info-container">
<div class="info-header">
<div class="info-header-text">
<h3>Los Santos International Airport</h3>
</div>
</div>
<div class="info-bottom">
ss
<div class="info-bottom-text">
sss
</div>
</div>
</div>
Between the header and footer of the div should be a content div which isn't implemented yet.
在div的页眉和页脚之间应该是一个尚未实现的内容div。
Would be nice if someone can help me with my issue! Thanks in advance.
如果有人可以帮我解决我的问题会很好!提前致谢。
3 个解决方案
#1
2
The trick is to wrap everything inside of a relatively-positioned element that is a direct child of the outer .info-container
.
诀窍是将所有内容包装在一个相对定位的元素中,该元素是外部.info-container的直接子元素。
This can be seen in the following, in which I've created the class info-wrapper
with the simple rule position: relative
.
这可以在下面看到,其中我用简单的规则位置:relative创建了类info-wrapper。
.info-container {
display: flex;
margin: 0 0 0 auto;
max-width: 450px;
max-height: 400px;
width: 100%;
height: 100%;
box-shadow: 0px 0px 38px 0px rgba(0, 0, 0, 0.36);
background-color: yellow;
}
div.info-header {
position: relative;
display: flex;
flex-direction: column;
width: 470px;
background: url('../img/infoheader.png') no-repeat;
background-position: auto auto;
height: 100px;
box-sizing: border-box;
}
div.info-header h3 {
font-family: 'SignPanter', sans-serif !important;
text-decoration: none;
font-size: 32px;
color: white;
font-weight: 200;
text-shadow: 1px 1px #747474;
text-align: center;
}
div.info-bottom-text:hover {
color: white;
text-shadow: 1px 1px #747474;
}
.info-bottom {
display: flex;
align-items: flex-end;
position: absolute;
bottom: 0px;
}
.info-wrapper {
position: relative;
}
<div class="info-container">
<div class="info-wrapper">
<div class="info-header">
<div class="info-header-text">
<h3>Los Santos International Airport</h3>
</div>
</div>
<div class="info-bottom">
ss
<div class="info-bottom-text">
sss
</div>
</div>
</div>
</div>
#2
3
set for outer div set stlye as
设置为外部div set stlye as
position: relative;
for the inner div set style as
对于内部div设置样式为
position: absolute;
bottom: 0;
#3
2
info-container
should have position: relative
info-container应该有位置:relative
.info-container {
position: relative;
display: flex;
margin: 0 0 0 auto;
max-width: 450px;
max-height: 400px;
width: 100%;
height: 100%;
box-shadow: 0px 0px 38px 0px rgba(0, 0, 0, 0.36);
background-color: yellow;
}
div.info-header {
position: relative;
display: flex;
flex-direction: column;
width: 470px;
background: url('../img/infoheader.png') no-repeat;
background-position: auto auto;
height: 100px;
box-sizing: border-box;
}
div.info-header h3 {
font-family: 'SignPanter', sans-serif !important;
text-decoration: none;
font-size: 32px;
color: white;
font-weight: 200;
text-shadow: 1px 1px #747474;
text-align: center;
}
div.info-bottom-text:hover {
color: white;
text-shadow: 1px 1px #747474;
}
.info-bottom {
display: flex;
align-items: flex-end;
position: absolute;
bottom: 0px;
}
#1
2
The trick is to wrap everything inside of a relatively-positioned element that is a direct child of the outer .info-container
.
诀窍是将所有内容包装在一个相对定位的元素中,该元素是外部.info-container的直接子元素。
This can be seen in the following, in which I've created the class info-wrapper
with the simple rule position: relative
.
这可以在下面看到,其中我用简单的规则位置:relative创建了类info-wrapper。
.info-container {
display: flex;
margin: 0 0 0 auto;
max-width: 450px;
max-height: 400px;
width: 100%;
height: 100%;
box-shadow: 0px 0px 38px 0px rgba(0, 0, 0, 0.36);
background-color: yellow;
}
div.info-header {
position: relative;
display: flex;
flex-direction: column;
width: 470px;
background: url('../img/infoheader.png') no-repeat;
background-position: auto auto;
height: 100px;
box-sizing: border-box;
}
div.info-header h3 {
font-family: 'SignPanter', sans-serif !important;
text-decoration: none;
font-size: 32px;
color: white;
font-weight: 200;
text-shadow: 1px 1px #747474;
text-align: center;
}
div.info-bottom-text:hover {
color: white;
text-shadow: 1px 1px #747474;
}
.info-bottom {
display: flex;
align-items: flex-end;
position: absolute;
bottom: 0px;
}
.info-wrapper {
position: relative;
}
<div class="info-container">
<div class="info-wrapper">
<div class="info-header">
<div class="info-header-text">
<h3>Los Santos International Airport</h3>
</div>
</div>
<div class="info-bottom">
ss
<div class="info-bottom-text">
sss
</div>
</div>
</div>
</div>
#2
3
set for outer div set stlye as
设置为外部div set stlye as
position: relative;
for the inner div set style as
对于内部div设置样式为
position: absolute;
bottom: 0;
#3
2
info-container
should have position: relative
info-container应该有位置:relative
.info-container {
position: relative;
display: flex;
margin: 0 0 0 auto;
max-width: 450px;
max-height: 400px;
width: 100%;
height: 100%;
box-shadow: 0px 0px 38px 0px rgba(0, 0, 0, 0.36);
background-color: yellow;
}
div.info-header {
position: relative;
display: flex;
flex-direction: column;
width: 470px;
background: url('../img/infoheader.png') no-repeat;
background-position: auto auto;
height: 100px;
box-sizing: border-box;
}
div.info-header h3 {
font-family: 'SignPanter', sans-serif !important;
text-decoration: none;
font-size: 32px;
color: white;
font-weight: 200;
text-shadow: 1px 1px #747474;
text-align: center;
}
div.info-bottom-text:hover {
color: white;
text-shadow: 1px 1px #747474;
}
.info-bottom {
display: flex;
align-items: flex-end;
position: absolute;
bottom: 0px;
}