Question

过去两天我一直在阅读这里的大多数问题以及更多关于'填充剩余宽度'和'逃避溢出：隐藏'的问题，但我可以我的问题解决了。目前，我严重怀疑它是否有可能。

我有一个全身宽的滚动框。最重要的是，我有一个绝对定位标题，我需要与滚动框完全相同的宽度。我的目的是在标题中设置标题0px或（如果需要）1px并让内容溢出。

这是fiddle。

滚动条有一个滚动条（始终可见），标题显然不是。为了弥补这一点，我将一个假的滚动条浮动到标题容器内的右边，然后在<div>左边填充剩余的宽度（正好是滚动框的内部宽度）。

HTML

//THE SCROLLBOX
<div id="scrollbox">
  <div id="center2">
    content<br>content<br>...
  </div>
</div>


// THE HEADER 
<div id="header_box">
  <!--- FAKE SCROLLBAR -->
  <div id="scroller">
    <div></div>
  </div>

  // REMAINING WIDTH
  <div id="container">

    <div id="FIRST">
      <div id="FIRST_banner"></div>
    </div>
  </div>

  <div id="SECOND">
    <div id="SECOND_banner"></div>
  </div>
</div>

</div>

CSS

#header_box {
  background: yellow;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 25px;
  width: 100%;
  overflow: visible;
}

#scroller {
  float: right;
  overflow-x: hidden;
  overflow-y: scroll;
  height: 50px;
  width: auto;
  /* visibility: hidden; */
}

#scroller>div {
  width: 0px;
  height: 101%;
}

#container {
  display: inline;
  width: auto;
  height: 50px;
  overflow: visible;
}

#FIRST {
  position: relative;
  overflow: hidden;
  height: 25px;
  background: pink;
}

#FIRST_banner {
  position: absolute;
  top: 0;
  left: 50%;
  height: 220px;
  width: 30px;
  background: crimson;
}

#SECOND {
  background: darkcyan;
  position: relative;
  height: 5px;
}

#SECOND_banner {
  position: absolute;
  top: 0;
  left: 50%;
  height: 220px;
  width: 30px;
  background: blue;
}

问题在于div（#FIRST）剩余宽度。从所有解决方案中我只阅读了

的解决方案

  position: relative;
  overflow: hidden;

适合我。它给出了精确的宽度，很好地排列了标题和滚动框的中心。但我无法突破overflow: hidden，因此它会切断内容。

所以我的第二个想法是：在#FIRST中包裹#container并让孩子确定父母的宽度。之后，我可以在容器内放置另一个div（#SECOND），其宽度为父级。它部分工作。 #container具有预期的宽度，#SECOND div很好地溢出但占用#header_box的宽度，因为父本身没有设置宽度。

所以，我的问题：

我可以以某种方式突破FIRST div的overflow: hidden吗？（在这种情况下，可以移除容器和第二个div）。
有没有办法让SECOND div服从它父母的宽度。
一些完全不同的解决方案。

可悲的是，这一切都有一个问题：

仅限css
没有javascript
没有flexbox

非常感谢你们。

Answer 1

最后，挽救了这一天的好<table>，比我想象的要简单得多。仍然有一个假的滚动条，但绝对标题现在与它后面的可滚动div的内容完美对齐，并且它仍然流畅。

See fiddle here

<强> HTML：

  <!--- HEADER  -->
  <div id="THIRD">
    <div id="THIRD_A">
      <div id="THIRD_B"></div>
      <div id="THIRD_C"></div>
      <div id="THIRD_D"></div>
    </div>
  </div>

  <!--- FAKE SCROLLBAR -->
  <div id="scroller">
    <div></div>
  </div>

</div>

<强> CSS：

/* The container for the header */
#header_box{
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 0px;
  width: 100%;
  overflow: visible;
  display: table;
}

/* Takes on the width of its child: the fake scrollbar */
#scroller {
  display: table-cell;
  float: right;
  overflow-x: hidden;
  overflow-y: scroll;
  height: 0px;
  width: auto;
}
/* This triggers a scrollbar to be shown */
#scroller>div {
  width: 0px;
  height: 101%;
}



/* The 'remaining width' container (= screenwidth - scrollbar, equals innerwidth of scrollbox) */
#THIRD{
    display: table-cell;
    width: 100%;
    height: 0px;
    }
/* Needed to give the children a 'width' reference */
#THIRD_A{
    position: relative;
    width: 100%;
    height: 0px;
    }

/* The actual header items */   
#THIRD_B {
position: absolute;
  top: 0;
  left: 50%;
  width: 25px;
  height: 220px;
  background: black;
}
#THIRD_C {
position: absolute;
  top: 0;
  left: 10%;
  width: 125px;
  height: 120px;
  background: black;
}
#THIRD_D {
position: absolute;
  top: 0;
  right: 0%;
  width: 25px;
  height: 220px;
  background: black;
}

注意：在大多数手持浏览器上，这是1px关闭。基于webkit的浏览器似乎将宽度为0px的表格单元格显示为1px宽度(see this question)。解决方案是使用css将表格包装在另一个div中：

position absolute; left: 0; right: -1px

并将#scroller>div设置为宽度1px。

注2： 这也是可滚动div内固定div的解决方案。 See this fiddle

带有滚动条

1 个答案: