Question

jSfiddle：https://jsfiddle.net/uhscokco/ 左菜单div与主

的高度不同

我正在尝试溢出，但是它添加了滚动条，在stackoverflow中看到了很多帖子，但是无法解决这个问题。感谢

<header>
  <div class="logo"></div>
  <div class="right"></div>
  <br style="clear: both">
</header>
<div class="content">
  <div class="leftMenu"></div>
  <div class="main">
    <div class="hotSpots">
    <div class="block1">
      <div class="icons">icon</div>
      <div class="table">
        <table>
          <tr>
            <td>1</td>
            <td>name</td>
            <td>locations</td>
            <td>shares</td>
            <td>social</td>
            <td>redirect</td>
          </tr>
          <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
          </tr>
         </table>
        </div>
       </div>
      </div>
    </div>
   </div>

Answer 1

如果您想使用百分比作为高度;确保你的身体有100％的高度。然后在名为content的父容器div上设置高度。否则，请在em或px中设置高度。将此添加到内容div。

.content:after { 
    content: " ";
    display: block; 
    height: 0; 
    clear: both;
 }

本文包含了解如何使用浮点数所需的一切： https://css-tricks.com/all-about-floats/

如果您不需要支持旧版浏览器，请考虑flexbox。而不是浮动。避免在开始使用花车时可能遇到的不稳定行为。

这两种方法都可以避免在桌面上裁剪。如果您设置overflow:none。

Answer 2

请检查此链接：https://jsfiddle.net/g4pp2wae/2/

.scroll设置页面滚动时左侧菜单的高度和$（文档）.ready设置首次加载页面时的高度。

所有职位都是绝对的。

    $(document).ready(function () {
    var temp;
    temp = $(".main-content").height();
    $(".left-menu").css("height",temp + "px");
});
$(window).scroll(function () {
    var temp;
    temp = $(".main-content").height();
    $(".left-menu").css("height",temp + "px");
})

没有浮动的Div不会扩展高度

2 个答案: