带位置绝对值的div与滚动条的内宽为div [英] Div with position absolute having innerwidth of div with scrollbar

查看：113
本文介绍了带位置绝对值的div与滚动条的内宽为div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

过去两天我在这里阅读最多的问题，以及更多关于填充剩余宽度和 escaping overflow：hidden 的信息，但我可以我的问题解决了。目前，我非常怀疑这是否有可能。



我有一个全身宽度的滚动框。除此之外，我有一个绝对定位的标题，我需要使得完全相同的宽度为滚动块。我的目的是使标题 0px 或（如果需要） 1px p>

这是小提琴。



滚动条有一个滚动条（总是可见），标题显然不是。为了弥补这一点，我将一个假的滚动条浮动到标题容器的右边，剩下的一个< div> 填充剩余的宽度

  // SCROLLBOX 
< div id =scrollbox> 
< div id =center2> 
 content< br> content< br> ... 
< / div> 
< / div> 
 
 
 // HEADER 
< div id =header_box> 
<！--- FAKE SCROLLBAR  - > 
< div id =scroller> 
< div>< / div> 
< / div> 
 
 //剩余宽度
< 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 ，所以它切断了内容。



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



所以，我的问题：


  1. 我能以某种方式突破FIRST div的 overflow：hidden （在这种情况下，容器和第二个div可以删除）。

  2. 是否有一种方法让SECOND div服从它的父元素的宽度。

  3. 一些完全不同的解决方案。

b


  • 仅限css

  • 无javascript

  • 没有flexbox



感谢您的任何修改。

解决方案

旧的< table> 保存了一天，比我想象的要简单得多。仍然有一个假的滚动条，但是绝对标题现在与其后的可滚动 div 的内容完全对齐，它仍然是流动的。



请参阅此处



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 ：

  / *头的容器* / 
 #header_box {
 position：absolute; 
 left：0; 
 top：0; 
 right：0; 
 height：0px; 
 width：100％; 
 overflow：visible; 
 display：table; 
} 
 
 / *占用它的孩子的宽度：假滚动条* / 
 #scroller {
 display：table-cell; 
 float：right; 
 overflow-x：hidden; 
 overflow-y：scroll; 
 height：0px; 
 width：auto; 
} 
 / *这将触发一个滚动条显示* / 
＃scroller> div {
 width：0px; 
 height：101％; 
} 
 
 
 
 / *'剩余宽度'容器（= screenwidth  -  scrollbar，等于scrollbox的内宽）* / 
 #THIRD {
 display：table-cell; 
 width：100％; 
 height：0px; 
} 
 / *需要给孩子一个'width'引用* / 
 #THIRD_A {
 position：relative; 
 width：100％; 
 height：0px; 
} 
 
 / *实际的标题项* / 
 #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宽的表格单元显示为1像素宽的 （请参阅此问题）。解决方案是使用css将表包装到另一个div中：

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

并设置＃scroller& / code>到 1px 的宽度。




这也是一个解决方案，一个固定的div在一个可滚动的div。 查看此小提示


The last two days I've been reading most questions here and a lot more about 'fill remaining width' and 'escaping overflow: hidden', but I can't get my problem solved. At the moment, I seriously doubt if it is possible at all.

I have a scrolling box with full body width. On top of that I have a absolute positioned header that I need to make the exact same width as the scrollbox. My intention is to make the header 0px or (if needed) 1px in height and let the content overflow.

Here is a fiddle.

The scrollbox has a scrollbar (always visible), the header obviously not. To compensate for that, I float a fake scrollbar to the right inside the header container, and left of that a <div> filling the remaining width (being exactly the innerwidth of the scrollbox).

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;
}

The problem lies in the div (#FIRST) with remaining width. From all the solutions I've read only the one with 

  position: relative;
  overflow: hidden;

works for me. It gives the exact width, lining up the center of the header and the scrollbox nicely. But I can't break out of the overflow: hidden, so it cuts off the content.

So my second thought was: wrap #FIRST in a #container and let the child determine the width of the parent. After that, I can put another div (#SECOND) inside the container with the width of the parent. It works partially. The #container has the width intended, and the #SECOND div overflows nicely but takes on the width of #header_box, as no width is set on the parent itself.

So, my questions:

  1. Can I somehow break out of the overflow: hidden of the FIRST div? (In that case the container and second div can be removed).
  2. Is there a way to let the SECOND div obey the width of it's parent.
  3. Some totally different solution.

Sadly there is a catch to this all:

  • css only
  • no javascript
  • no flexbox

Thanks voor any toughts.

解决方案

In the end, it was the good old <table> that saved the day, much simpler than I tought. There still is a fake scrollbar, but the absolute header now aligns perfect with the contents of the scrollable div behind it, and it remains fluid.

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;
}

NOTE: On most handheld browser, this is 1px off. It seems webkit based browsers display a tablecell of 0px width as 1px width (see this question). The solution is to wrap the table in another div with css:

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

and setting #scroller>div to a width of 1px.

NOTE 2: This is also a solution for a fixed div inside a scrollable div. See this fiddle

这篇关于带位置绝对值的div与滚动条的内宽为div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆