Html 使用ems和%s逃离父div的子级出现问题

我一直在一个网站上工作，我一直在使用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>

---

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

也许我修正了一点。我更新了：

• “id”插入页脚标记
• 小jscript

以下是我的js代码：

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

---

@医生，你能给我举个例子吗？视口是否不在HTML中并设置为1？抱歉这个愚蠢的问题。这就是我如何做一个简单的页脚，你可能需要适应你的需要。#页脚{宽度：100%；高度：5%；文本对齐：中心；字体大小：2vw；背景：-webkit线性渐变（顶部，#444343 0%，#282828 40%，#000000 100%）；背景：-moz线性梯度（顶部，#444343 0%，#282828 40%，#000000 100%）；颜色：白色；因此，我不需要使用这种方法在页面包装中为页脚留出负边距？因此它保持在底部不，只要说，例如，您有一个页眉高度为15%，我非常感谢您的帮助，但我正在寻找一种纯css方法，因为我的Javascript技能非常有限。然后，就这样做，页脚{float:left；margin left:3em；margin bottom:0；}它的工作原理与我之前建议的相同。

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