Question

我一直在开发一个我一直在使用ems和％in的网站，因为我想让它变得敏感。这是我第一次尝试这个。我有相同的网站使用px。

我遇到这个问题，页眉和页脚中的内容没有正确调整大小。内容向下移动到容器之外或与其他内容重叠。

即。在我的页脚中说我将父内容设置为100％宽度，然后将子div设置为它的各种百分比。

当我重新调整尺寸时，孩子们会从容器中移出，甚至是脚踏板。

在我的代码中，我只是放了页脚代码，因为如果我把它全部放在它看起来很麻烦

<footer class="site-footer">
<div class="leftfoot">
<div class="footercontent">

            <div class="logocopyright">
      <a href="index.html"> Tali.Zorah 2015 &copy;</a>
  </div>
        </div>
    </div>

  <div class="rightfoot">
  <div class="legal">
  <ul>
    <li><a href="contact.html">CONTACT US</a></li>
    <li><a href="about.html">ABOUT US</a></li>
    <li><a href="legal.html">LEGAL NOTICE</a></li>
    <li><a href="privacy.html">PRIVACY POLICY</a></li>

   </ul>
  </div>

  <div class="social">

  <ul class="socicons">
    <li>
      <a class="facebook" href="https://www.facebook.com"> <img src="http://placehold.it/350x150"></a>
    </li>
    <li>
      <a class="twitter" href="https://www.twitter.com"><img src="http://placehold.it/350x150"></a>
    </li>
    <li>
      <a class="instagram" href="https://www.instagram.com"><img src="http://placehold.it/350x150"></a>
      </li>
    </ul>
  </div>
 </div>
</footer>

页脚CSS：

.footercontent{
 position:absolute;
 min-width:100%;
 max-width:100%;       
}

.logofooter{

 float:left;
 margin-left:2%;
 min-width: 10%;
 max-width: 10%;
 min-height:100%;

}
.mysitefooter-logo {
 min-height: 100%;
 min-width:10%;
 max-width:100%;
 margin-top: -1%;
 margin-right:1%;
}


.logocopyright{
 float:left;
 margin-top:5%;
 margin-left:2%;
 min-width:100%;
 padding-top:1%;

}
.leftfooter{
 min-width:10%;
 max-width:15%;
 float:left;
}
.rightfooter{
 min-width:85%;
 max-width:90%;
 float:right;
}
.logocopyright a {

 font-family: 'Arial Black', 'Arial Bold', Gadget, sans-serif; 
 color: #fff;
 text-decoration: none;
 text-transform: uppercase;
 font-size:.6em;
}
.logocopyright a:hover{
 color: #FFF;
 -webkit-border-radius: 200px;
 -moz-border-radius: 200px;
 border-radius: 200px;
 background: #1874CD; 
}


.legal{
 background-color:#009;
 min-width:70%;
 max-width:80%;
 float:left;

}

.legal a:hover {
 color: #FFF;
 -webkit-border-radius: 200px;
 -moz-border-radius: 200px;
 border-radius: 200px;
 background: #1874CD;  
}
.legal ul li {
 display:inline-block;
 font-family: 'Arial Black', 'Arial Bold', Gadget, sans-serif;
 font-size:.8em;
 margin-left:8%;
 min-width:10%;
 max-width:100%;
}
.legal ul > :first-child {
 margin-left:5%;
}
.legal a {
  font-size:1em;
  color:#FFF;

}
.social{
 min-width:15%;
 max-width:20%;
 float:right;
 margin-top: -4%;
 color:#000000;

}

.social li {

    display:inline-block;

}
.socicons{
    min-width:80%;
    max-width:100%;
}
.socicons li{
    display:inline;
}
.facebook{
    min-width:8%;
    max-width:10%;
}
.facebook img
{
    min-width:8%;
    max-width:20%;   
}
.twitter{
    min-width:8%;
    max-width:10%;
}
.twitter img
{
    min-width:8%;
    max-width:20%;

}
.instagram{
    min-width:8%;
    max-width:10%;
}
.instagram img
{
    min-width:8%;
    max-width:20%;

}

Answer 1

如果你想要一个响应式网站绝对定位不是一个好主意。只需使用100％的宽度并尝试使用视口（vw）宽度而不是ems。

Answer 2

也许我修了一下。我更新了：

＆＃39; ID＆＃39;进入页脚标记。
小jscript。

这是我的js代码：

var footer =  document.getElementById("guestAttempt");
footer.setAttribute("float","left");
footer.setAttribute("margin-left","3em");
footer.setAttribute("margin-bottom","0em");

https://jsfiddle.net/unt5zbL8/6/embedded/result/

孩子们使用ems和％逃避父母div的问题

2 个答案: