Question

在下面的代码中，粉红色div溢出。如何在父div中创建宽度100％？

这是一个JS小提琴 - https://jsfiddle.net/8q8n6bt5/

#mobilefooter {
    width: 100%;
    height: 70px;
    background: #06C;
    position: absolute;
    display: inline;
    z-index: 99;
    bottom: 0;
    box-sizing: border-box;
}
.foxmobile {
    width: 42px;
    height: 60px;
    background:#2CDB46;
    margin-top: 5px;
    display: inline;
    float: left;
}

.footercontext {
    width: 100%;
    height: 60px;
    background: #F36;
    color: #FFF;
    margin-left: 45px;
    margin-top: 5px;
    display: block;


}
.footercontext p {
    width: 100%;
    font-size: 10px;
    line-height: 12px;
}

Answer 1

您应该从.footercontext移除宽度：100％。它会自动扩展以适合父级。

＆＃13;

#mobilefooter {
  width: 100%;
  height: 70px;
  background: #06C;
  position: absolute;
  z-index: 99;
  bottom: 0;
  box-sizing: border-box;
}
.foxmobile {
  width: 42px;
  height: 60px;
  background: #2CDB46;
  margin-top: 5px;
  display: inline;
  float: left;
}
.footercontext {
  height: 60px;
  background: #F36;
  color: #FFF;
  margin-left: 45px;
  margin-top: 5px;
  display: block;
}
.footercontext p {
  font-size: 10px;
  line-height: 12px;
}

＆＃13;

<div id="mobilefooter">
  <div class="foxmobile"></div>
  <div class="footercontext">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</div>

＆＃13;

Answer 2

在width: auto元素上使用.footercontext。

Demo

＆＃13;

html,
body {
  margin: 0;
  padding: 0;
}
#mobilefooter {
  width: 100%;
  height: 70px;
  background: #06C;
  position: absolute;
  display: inline;
  z-index: 99;
  bottom: 0;
  box-sizing: border-box;
}
.foxmobile {
  width: 42px;
  height: 60px;
  background: #2CDB46;
  margin-top: 5px;
  display: inline;
  float: left;
}
.footercontext {
  width: auto;
  height: 60px;
  background: #F36;
  color: #FFF;
  margin-left: 45px;
  margin-top: 5px;
  display: block;
}
.footercontext p {
  width: 100%;
  font-size: 10px;
  line-height: 12px;
}

＆＃13;

<div id="mobilefooter">
  <div class="foxmobile"></div>
  <div class="footercontext">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</div>

＆＃13;

Answer 3

背后的原因是。{1}} .footercontext。只需添加以下代码行：margin-left: 45px;即可通过扣除45px的保证金来使width: calc(100% - 45px);成为100％。

JSFiddle

.footercontext

.footercontext {
    width: calc(100% - 45px); /* CHANGED */
    height: 60px;
    background: #F36;
    color: #FFF;
    margin-left: 45px;
    margin-top: 5px;
    display: block;
    }

body{ margin:0px;}
#mobilefooter {
	width: 100%;
	height: 70px;
	background: #06C;
	position: absolute;
	display: inline;
	z-index: 99;
	bottom: 0;
	box-sizing: border-box;
}
.foxmobile {
	width: 42px;
	height: 60px;
	background:#2CDB46;
	margin-top: 5px;
	display: inline;
	float: left;
}

.footercontext {
	width: calc(100% - 45px);
	height: 60px;
	background: #F36;
	color: #FFF;
	margin-left: 45px;
	margin-top: 5px;
	display: block;
	
	
}
.footercontext p {
	width: 100%;
	font-size: 10px;
	line-height: 12px;
}

注意：还添加<div id="mobilefooter"> <div class="foxmobile"></div> <div class="footercontext"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div>以忽略身体边距。

如何将div的宽度100％设为父div？

3 个答案: