相关疑难解决方法(0)

我在开发网页时遇到了问题.

Firefox或Internet Explorer都不会显示我对以下代码段的预期行为:

<div
    style="overflow-x: visible; overflow-y: auto; width: 200px; height: 200px; border: 1px solid #F00;">
    <div style="width: 300px; height: 300px; background-color: #0F0;">&nbsp;</div>
</div>

我期望的是能够看到容器div的x侧溢出的内容,而不是底部溢出的内容(使用滚动条查看更多内容).相反,我看到的是一个x滚动条和一个滚动条.

注意:在firebug中检查计算出的样式属性会显示firefox正在overflow-x: auto;用于容器.

这种行为有望吗？我理解在请求将滚动条置于我自己的内容之上时存在一些含糊之处(例如,我的水平内容将超过垂直滚动条,因此必须覆盖一些内容).

我遇到符合标准的行为也是如此吗？

我有一个包含其他几个div的DIV.我需要div才能垂直向外窥视,而不是水平.

我想用overflow-x和overflow-y会解决这个小问题,但我只能得到任何x和y显示,或让他们都躲起来.

我的CSS和HTML:

.game {
  position:absolute;
  width:400px; height:300px;
  top:100px; left:100px;
  background-color:#cccccc;

  overflow-x:hidden;
  overflow-y:visible;
}

.block1 {
  position:absolute;
  width:100px; height:100px;
  top:-50px; left:150px;
  background-color:#ffcccc;
}

.block2 {
  position:absolute;
  width:100px; height:100px;
  top:150px; left:-50px;
  background-color:#ccffcc;
}

<div class="game">
  <div class="block1"></div>
  <div class="block2"></div>
</div>

看到这个JSFiddle:即使overflow-y设置为可见,两个子div都被截断.

我在溢出容器中有一个响应表,如uikit文档中所述:

<div class="uk-overflow-container">
    <table class="uk-table uk-table-striped uk-table-hover">
        <thead>
            ...
        </thead>
        <tbody>
            ...
        </tbody>
    </table>
</div>

在td每行的最后一行里面,tbody我有一些下拉按钮:

...
<td>...</td>
<td>
    ...
    <div class="uk-button-dropdown"
         data-uk-dropdown="{mode:'click', pos:'bottom-right'}">
        <button class="uk-button">
            <i class="uk-icon-angle-down"></i>
        </button>
        <div class="uk-dropdown uk-dropdown-close">
            <ul class="uk-nav uk-nav-dropdown">
                <li>...</li>
            </ul>
        </div>
    </div>
</td>

在表的末尾,下拉列表被溢出容器剪切:

正如您所看到的,下拉列表使溢出容器垂直滚动,并且在表格的顶部,下拉(或称为drop up)只是剪切而不滚动:

在只有一行或只有几行的表格中,它甚至更成问题:

所以这是我到目前为止尝试解决这个问题:

1.我尝试使用uikit文档中boundary描述的选项(自动下拉翻转)

<div class="uk-overflow-container" id="fix-dropdowns">
   ...
      <div class="uk-button-dropdown" data-uk-dropdown="{mode:'click', pos:'bottom-right', boundary:'#fix-dropdowns'}">

这应该向下翻转较低的下拉菜单,但自动翻转仍然指向视口.我甚至把它放到了id="fix-dropdowns"不同的父元素之类的table或者tbody

2.我删除了uk-overflow-container类和一些自己的CSS取代了它.

<div style="overflow-x: scroll; overflow-y: visible;"> …

我有一个容器里面有一个列表.可以拖动列表项,使用鼠标移动.

容器可滚动,具有:

overflow-y: scroll;

通过设置此属性,Chrome会自动将该overflow-x属性设置为"自动".如果我设置overflow-x: visible它将被Chrome忽略.如果我设置,overflow-x: hidden那么显然该项目被裁剪.

当我将列表项拖到容器的左边或顶边之外时,它会被裁剪到容器的边缘.如果我将其拖出右边或底边,容器会滚动以容纳它.我希望该项能够在没有被裁剪的情况下拖动到容器外部,并且不会触发滚动.

鉴于容器必须设置为overflow-y: scroll并且这反过来迫使Chrome设置overflow-x: auto,有什么方法可以实现这一点,还是不可能？

Codepen:http://codepen.io/Pedr/pen/azLWeY

注意:我知道我可以通过使用填充来抵消容器(以便容器的限制实际上超出其可视边缘)来破解这一点,但在我的情况下这不是一个选项.

$(function() {
  $('.Wrapper').mousemove(function(event){
    $('.Item').offset({left: event.pageX, top: event.pageY});
  });
})

html,
body {
  height: 100%;
}

.Wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
}

.Container {
  background: grey;
  position: absolute;
  width: 50%;
  left: 25%;
  min-height: 100%;
  overflow-y: scroll;
  overflow-x: hidden; // Clips Item
  // If left at auto it will clip the item on …

我有一个div(蓝色框)在父元素(红色框)内的页面上绝对定位,我需要将overflow-y设置为隐藏,以便它强制Y轴上溢出的内容被切断,但我希望任何溢出-x的内容都可见.

HTML:

<div id="box1">
    <div id="box2">
        <div style="width:200px;height:640px;background:red;position:relative;">
            <div style="width:200px;height:200px;background:blue;position:absolute;left:200px;top:100px;"></div>
        </div>
    </div>
</div>

和CSS:

#box1 {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    width:200px;
    overflow-y: hidden;
    border: green 10px solid;
}
#box2 {
    width: 200px;
    overflow-x: visible;
}

这是一个小提琴:http://jsfiddle.net/3dhdy9e9/12/

在阅读了有关Stack Overflow上的主题/问题的一些文章后,显然溢出被覆盖,scroll如果hidden被应用于同一个DOM元素,因此我将代码拆分为使用box1和box2.

基本上我希望绿色框是容器,它强制内容隐藏在Y轴上,但允许内容按照屏幕截图在X轴上流出:

我看不到蓝框,因为它被隐藏的溢出Y切断,即使它的子元素设置为可见/自动...

绿色框应该被限制在200px宽,以便低于其高度的内容被切断,并且蓝色框应该能够流出(通过绝对位置)而不影响绿色框的宽度(如果绿色框的宽度可以正常工作我删除了溢出的隐藏).

目标

<div class="Card">
  <div class="Card-FullNameLabel">Gregg Sims</div>
  <div class="Card-OrganizationNameLabel">Compubotics</div>
</div>

1. 在.Card-FullNameLabel有font-size: 16px和line-height: 1。
2. 在.Card-OrganizationNameLabel有font-size: 12px和line-height: 1。
3. .Card-FullNameLabel和之间的垂直空间.Card-OrganizationNameLabel必须正好为6px。
4. 以下 CSS 规则必须有效且不得更改。

.Card-FullNameLabel + .Card-OrganizationNameLabel {
  margin-top: 6px;
}

5. 双方.Card-FullNameLabel并.Card-OrganizationNameLabel必须有溢出公差（例如，如果该内容会像ÀÇ?jgpfhjklb?iEstosTreMalfaci等它不能从parrent突出）。
6. 尽管 to ，所有字母都必须完全可见line-height: 1。
7. 不允许在 CSS 代码中使用心算（幻数和/或硬编码偏移量和其他必须预先计算的值）。

可以做什么：将 Pug 预处理器的功能用于标记，将 CSS 预处理器用于样式。

初始小提琴不满足条件编号5：目前该卡不支持溢出。

关于line-height: 1，不好的做法

我一再被告知我必须设置line-height的价值超过1 …

我想把这个属性作为div:

.content {
position: relative;
overflow-y : auto;
overflow-x: visible;
}

根据此页面,如果一个被指定为"可见"而另一个是"滚动"或"自动",则"可见"设置为"自动".所以似乎不可能同时使用overflow-y:auto和overflow-x:visible.

但是,我需要把这个属性放到一个网站上,有没有办法做到这一点？

凡妮莎自己找到了答案.这里是:

好的,我解决了问题:)如果有人遇到这种问题:不要忘记删除父元素的相对位置(这具有溢出属性):绝对div将根据父div放置相对位置.如果没有,它将根据身体放置! - Vanessa 1月19日在5:38

我有一个400px x 400px div,我想垂直滚动.所以我设置overflow-y:auto.但偶尔,我希望div内的内容溢出-x:可见.

这不起作用.我认为这是因为如果其中一个可见,则无法设置不同的溢出值.

真正？

否则,有没有一个像样的css/js修复？我注意到当这种情况发生时,flow app会向身体附加一个计算的绝对位置div:http://cl.ly/32392W0U2t1y2Q103X2d.这是最好的解决方案吗？是否有任何插件/教程可供查看？

我已经阅读了这个问题和答案:CSS overflow-x:visible; 溢出-y:隐藏; 导致滚动条问题以及一堆其他冲突的用例.我也尝试过将不同的溢出类型应用于不同的父母.似乎没有什么能让我的用例工作.

我的情况

我有一个全高度的固定菜单,其中包含很多链接,所以如果浏览器不够高,无法显示所有内容,我想让用户在固定的div中滚动.不是一个大胆的要求.

我如何解决这个问题,这是我正在使用的设置示例:http://jsfiddle.net/mz9abf43/9/

UPDATE

这是我的完整上下文代码的更新小提琴,这正是我希望我的菜单看起来如何,但我只想允许垂直滚动,如果屏幕高度小于菜单的长度.http://jsfiddle.net/mz9abf43/24/

预期产出

每个链接之间的线应该溢出到蓝色菜单的右侧(如下图所示)并且还允许用户在蓝色菜单中滚动.目前我只能做一个或另一个.

我的结构是:

<div id="fixed">
    <nav>
       <ul class="menu">
         <div class="drop">
             <li>Link here</li>
             <li>Link here
                 <ul>
                    <div class="drop">
                        <li>Link here</li>
                        <li>Link here</li>
                    </div>
                 </ul>
             </li>
             <li>Link here</li>
         </div>
       </ul>
    <nav>
</div>

我的CSS是

#fixed {
        width:280px;
        position: fixed;
        top: 0;
        left: 0;
        bottom:0;
        z-index: 1000;
        background: #fff;
}

.menu   {
        padding: 0;
        margin: 0;
        position: fixed;
        z-index: 9998;
        top:0;
        bottom:0;
        left:0;
        background: white;
        width: …

我有一个包含一些调整大小元素的列表。当调整元素大小时，它们应该在 x 方向溢出容器。永远不应该在 x 方向上滚动。应在 y 方向启用滚动。

我尝试过设置：

overflow-x: visible;
overflow-y: scroll;

但这似乎可以双向滚动。

我该如何防止这种情况？

https://jsfiddle.net/64tw8rqe/

CSS溢出-x的答案：可见；和溢出-y：隐藏；导致滚动条问题解释了根本问题，但不是scroll.

此行为符合规范。我正在寻找解决方法。