logo标签列表

固定位置的div内有带滚动条的div

csscss-position
53

我有一个设置为position:fixed的div，它是我的菜单容器。我将其设置为top:0px，bottom:0px以始终填充视口。在该div内，我想要有另外两个div，其中较低的一个包含许多行并具有overflow:auto属性。我期望它应该被包含在容器div中，但如果行数过多，则会将其扩展到固定的div之外。下面是我的代码和截图以进行澄清：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>MyPlan</title>
    <meta name="X-UA-COMPATIBLE" value="IE=8" />
    <style type="text/css">
        #outerfixed { position:fixed;  width:200px;  background-color:blue; padding:5px; top:0px; bottom:30px;}
        #innerstatic1 { width:100%; background-color:yellow; height:100px;}
        #innerstatic2 { overflow:auto; background-color:red; width:100%;}
    </style>
</head>
<body>
    <div id="outerfixed">
        <h3>OUTERFIXED</h3>
        <div id="innerstatic1">
            <h3>INNERSTATIC1</h3>
        </div>
        <div id="innerstatic2">
            <h3>INNERSTATIC2</h3>
            line<br />
                        ...lots of lines
            line<br />
        </div>
    </div>
</body>
</html>

alt text

有没有办法让我做到这一点？我想让 #innerstatic2 很好地包含在 #outerfixed 中，如果它比 #outerfixed 内部拥有的空间更大，那么就出现滚动条。

我知道有一些通过修复 #innerstatic2 来绕过此问题的可能性，但如果可能的话，我真的希望它在 #outerfixed 内部的流程中，这样如果我将 #outerfixed 移动到其他位置，则内部元素也会随之移动。

编辑：我知道我可以在 #outerfixed 上设置 overflow:auto 并在整个元素上获得滚动条，但是我特别想在 #innerstatic2 上仅获得滚动条，因为它是一个网格，我只想滚动网格。

有人知道吗？可行吗？

8个回答
54

这个问题有一个两步解决方案，但代价比较高：

  1. 在 #innerstatic2 的 CSS 中添加 overflow-y: scroll;。
  2. 为 #innerstatic2 定义一个 height（或 max-height），否则它不会溢出，只会不断增加其高度（div 的默认高度是 height: auto）。

编辑，因为有时我就是控制不住自己。

我在 jsbin 上发布了一个演示，展示了 jQuery 实现此功能的方法，它将为您计算 height（它没有通用化，所以它只适用于当前的 html）。

(function($) {
  $.fn.innerstaticHeight = function() {
        var heightOfOuterfixed = $('#outerfixed').height(),
        offset = $('#innerstatic2').offset(),
        topOfInnerstatic2 = offset.top,
        potentialHeight = heightOfOuterfixed - topOfInnerstatic2;

        $('#innerstatic2').css('height',potentialHeight);
  }
})(jQuery);

$(document).ready(
    function() {
        $('#innerstatic2').innerstaticHeight();
    }
);
1
谢谢您的回答。实际上，这就是我们今天所拥有的，使用jQuery计算#innerstatic2的正确高度并设置。但是，这会导致与第三方组件的问题，当我们在文档准备好时进行更改时，某些尺寸会被错误地计算，这就是为什么我真正想要一个纯CSS解决方案的原因。 - Einar Egilsson
那么，通过在#outerfixed上设置高度来强制滚动#innerstatic2的方法不存在吗？从我尝试过的情况来看，好像不行，如果我在#outerfixed上设置了显式高度，#innerstatic2就会溢出，但这是因为它的position属性是fixed吗？ - Einar Egilsson
这是可能的。您还可以将 overflow: hidden 添加到 #outerfixed 的 css 中，但不幸的是这看起来不太美观。 - David Thomas
我没有使用JQuery。对我来说，仅使用overflow-y: auto;就足够了，因此当内容在#innerstatic2中超过最大高度时，滚动条将呈现，但并不总是，这很丑陋。那正是我所需要的。您可以检查http://climaenruta.lhdevsolutions.net/左侧边栏中的`#searchContainer`。 - Juan Ignacio Avendaño Huergo
21

我通过给ul绝对定位并将高度设置为100%来解决了它。

ul {
  overflow-y: scroll;
  position: absolute;
  height: 100%;
}

查看这个 FIDDLE

4
这个解决方案隐藏了 ul 的底部（它不会显示最后一个 li 实例）。 - sjbuysse
7

overflow-y:scroll;

在iOS设备上添加以下代码，它可以提供更好的滚动效果。出于安全原因，overflow-y需要设置为scroll！对于一些人来说，auto不起作用。或者至少是我听到的。

-webkit-overflow-scrolling: touch;

4

你应该为outerfixed设置高度，为innerstatic2设置最大高度。

看一下这个可能会有帮助：演示

1

虽然不是最理想的，但这应该可以让你完成90%的工作

<div style="position:fixed; bottom:1px; left:5em; height: 20em; width:20em; background-color:blue;">
        <div style ="width:15em; background-color: green;">
                Title
        </div>
        <div style ="background-color:yellow; max-height:80%; width:15em; overflow:auto;">
                <div style="height:100em; background-color:red; width:10em;">
                        scroll<br/>
                        scroll<br/>
                        scroll<br/>
                </div>  
        </div>  
</div>
1

必须在容器div上使用overflow:auto属性。在这种情况下，是#outerfixed div。

抱歉，我应该更清楚地表达。我明确希望滚动条仅出现在 #innerstatic2 元素上。它是一个网格，我只想滚动网格，而不是整个容器。 - Einar Egilsson
1

我能想到的唯一方法是将innerstatic2设置为绝对定位（这样您就可以使用顶部和底部来相对于outerfixed调整其大小），然后在innerstatic2内创建另一个div，在其中放置文本。然后，您给innerstatic2指定“overflow：auto;”指示。这种方法的缺点是，当innerstatic1增长时，innerstatic2不会向下移动，因为它必须是绝对定位。如果需要移动，则必须是“position:relative”，但是那样您需要为其设置固定高度。因此，无论哪种方式，您都必须妥协。

一旦所有浏览器都支持较新的CSS3功能，例如计算支持，就会有更好的选项来解决这个问题，而不会出现这些缺点。

0

所以我无法使用固定位置，但是我通过相对位置得到了期望的效果。

试试这个

<div class="parent" style = "overflow: scroll;  position: relative; width: content-box"">

  <div class="scrollable-child" >
   //Your content here
   
  </div>

</div>

我在我的vuejs项目中使用了这个

<template>
  <v-flex class=" d-flex flex-column " style="overflow: scroll;  position: relative; width: content-box">

//FIXED HEAD

    <v-flex class="pt-10" style="position: fixed; background-color: black;width: 25.2em;z-index: 1;border-radius: 20px 20px 0 0">
      <TextView class="mx-4" text="Thur 28, 2021" size="24" bold :color="colors.primaryText"/>
      <TextView   :text="`${order.totalOrder()} Items`" size="24" bold :color="colors.primaryText" class="my-2 mx-4"/>
      <v-divider dark style="height: 5px" class="max-4" />
    </v-flex>
   

//SCROLABLE LIST ITEMS

    <v-flex class=" mx-4 d-flex flex-column justify-end  " style="margin-top: 100px;padding-bottom: 100px; padding-top: 50px">
<!--      <TextView :text="receipt" :color="colors.primaryText"/>-->
        <ProductComponent type="cartItem" v-for="(product,index) in order.products" :key="`order_item_${index}`" :product="product" :invert-theme="true" @onAdd="addOneMore(index)" @onRemove="removeOne(index)" />
    </v-flex>

//BOTTOM FIXED BTN

    <v-flex class="d-flex flex-column justify-end mb-2 xs12 mx-4 " style="max-height: 100px; position: fixed; bottom: 30px; width: 23em"  >
      <v-btn block ref="renderBtn" @click="renderReceipt()" depressed min-height="60" style="border-radius: 20px">
       <TextView text="Order" bold/>
      </v-btn>
    </v-flex>
  </v-flex>
</template>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接