如何将包含内容的子 div 的大小固定到父 div 中？答案

【问题标题】：How to fix size of child divs with content into parent div?如何将包含内容的子 div 的大小固定到父 div 中？
【发布时间】：2017-01-25 11:59:31
【问题描述】：

我在调整浏览器窗口大小时遇到了一些 div 大小问题。我希望子 div 始终保留在父 div 内，并在浏览器窗口调整大小时与父 div 成比例地减小。我想它应该是一个javascript，但我不知道究竟是哪一个以及如何使用它。任何建议将不胜感激！

     #parent
    {
     position: fixed;
     width: 100%;
     height:    11%;
     background-color: white;
     left: 0;

    } 

    #child1
    {
   left: 100px;  
   position:absolute;     

    }

    #child2
    {
      position: absolute;
      left: 700px;   
      margin-top: 15px;    
      font-size: 1.5em; 

    }



    <div id="parent">

          <div id="child1">
         <a> <img src="img\linkedin.png" alt="jhj" width="200px;" height="70px;" />   </a>

          </div>  

          <div id="child2"> <a>Home</a>  <a>Examples</a> <a>Tricks</a> <a>Contact us</a> 
          </div>
    </div>

【问题讨论】：

如果你有css中属性值的百分比，那么它将按比例调整大小。
你孩子的绝对位置应该是right: 0; bottom:0; top: 0
感谢您的回答！现在它解决了 child1 的问题，但所有响应都没有对 child2 做任何事情。调整大小时文本仍然会超出父 div

标签： javascript jquery html css ajax

【解决方案1】：

尝试将两个孩子的样式更改为以下内容：

#child1 {
    left: 100px;  
    position:absolute;     
    width: 50%;
}

#child2 {
    position: absolute;
    right: 0;
    margin-right: 20px;
    text-align: right;
    width: 50%;
    margin-top: 15px;
    font-size: 1.5em;
}

【讨论】：

感谢您的回答！现在它解决了 child1 的问题，但所有响应都没有对 child2 做任何事情。调整大小时文本仍然会超出父 div

【解决方案2】：

为了能够影响到父 div，#child2 应该是 position: relative;，如下所示：

  #child2 {
    position: relative;
    top: 15;
    margin-top: 0;
  }

https://jsfiddle.net/eapo/1tkqsm5q/

【讨论】：

感谢您的回答！现在它解决了 child1 的问题，但所有响应都没有对 child2 做任何事情。调整大小时文本仍然会超出父 div
您的评论不清楚，我写的是关于#child2.. 并解决了您的问题。请使用 jsfiddle.net
jsfiddle.net/ddpjy857 你的和父级的 height 属性的区别。如果我使用你的代码，父级 div 会太薄，但是当我添加高度时，调整大小的问题又出现了。跨度>
oops 我想我刚刚通过在 child2 中使用 margin-top 属性自己解决了这个问题。无论如何，谢谢！你帮了大忙！