CSS，显示 : table and overflow not working properly on child div's

Question

基本上我有一个网页，用户可以在其中更改我的布局中的内容。我正在尝试强制放置内容的 div 溢出隐藏或滚动。

但是我的页面宽度不断增加而不是滚动/隐藏。

http://jsfiddle.net/weLn0g96/3/

有比我聪明的人能解决这个问题吗？ Prolly 缺少类似 position:absolute; 或 overflow 的东西应该在其他地方等等。

Answer 1

将 #container 更新为 display:block; 和 overflow: scroll;。使用 display:table; 将使 #container 元素的宽度与保存数据所需的一样宽，并且不会遵守父元素的 100% 宽度你已经宣布并正在努力完成。

#container {
  /* Change display: table; to */ display: block;
  width: 100%;
  height: 100%;
  text-align:center;
  overflow: scroll; /* add this */
}

如果您希望 #container 元素真正达到 body 高度的 100%，您还应该将 height:100%; 添加到您的 html 和 body 元素中.

出于演示目的，请参阅将边框添加到 #container 的代码段。

html,
body {
  margin: 0;
  padding: 0;
  background-color: #111111;
}

#container {
  /* Change display: table; to */
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  overflow: scroll;
  /* add this */
}

#container {
  /* styles just for demonstration */
  border: 5px solid green;
  box-sizing: border-box;
}

#row-empty {
  display: table-row;
  width: 100%;
  height: 100%;
}

#sides {
  display: table-cell;
}

#main {
  display: table-cell;
  width: 800px;
  margin: 0px;
  padding: 0px;
}

#main-table {
  display: table;
  width: 100%;
  height: 100%;
  background-color: #CCCCCC;
}

#menu {
  display: table-row;
}

#menu-col {
  display: table-cell;
  width: 100%;
  height: 100px;
  border-bottom: 1px solid #000000;
}

#page {
  display: table-row;
  width: 100%;
  height: 100%;
}

#page-col {
  display: table-cell;
  position: relative;
  background-color: yellow;
  overflow-x: hidden;
}

<div id="container">
  <div id="row-empty">

    <div id="sides">&nbsp;</div>
    <!-- Left Column -->

    <div id="main">
      <!-- Middle Column -->

      <div id="main-table">
        <!-- New table inside table-cell for rows inside this cell -->

        <div id="menu">
          <!-- Top Row -->
          <div id="menu-col">

            menu

          </div>
        </div>

        <div id="page">
          <div id="page-col">
            <!-- Middle Row -->

            testar [asdf] asdasd
            <div news style="display:inline-block;width:500px;overflow-x:auto;background-color:red;width:1500px;">Inga nyheter än.</div> xx

          </div>
        </div>

      </div>

    </div>
    <!-- Middle Column (main) end -->

    <div id="sides">&nbsp;</div>
    <!-- Right Column -->

  </div>
  <!-- row end -->
</div>
<!-- container end -->