Question

我有一个固定在浏览器窗口左下角的窗口。窗口内部是一个标题栏，应该保留在窗口的顶部，有些内容有时比窗口允许的长。我正在尝试向内容添加滚动条，但内容会溢出窗口并在不创建滚动条的情况下被剪掉。

可以将滚动条添加到#WindowConsole，但这也会使#WindowTitleBar滚动。

如何让#WindowContent div适合#WindowConsole的父空间并让它的内容溢出滚动条？

CSS

#WindowConsole {
    position: fixed;
    bottom: 0;
    left: 1;
    min-width: 10%;
    max-width: 27.4%;
    max-height: 50%;
}

#WindowContent {
    padding: 0px;
    overflow-y: scroll;
}

HTML

<div id="WindowConsole">
    <div id="WindowTitleBar">
        <span id="WindowTitle">Window</span>
        <a id="WindowMinimizeButton" href="">_</a>
    </div>
    <div id="WindowContent">
        Really long content
    </div>
</div>

Answer 1

您已经在JSFiddle示例中完成了所有操作，这里唯一的问题是您需要在#WindowContent上使用某种形式的固定高度。

在这种情况下，我使用max-height这样：

#WindowContent {
    max-height: 200px;
}

这将允许它在滚动条开始之前具有200px的断点。这是updated working fiddle

Answer 2

我认为您希望内容区域的大小相应，因此您需要具有固定的标题栏高度，以便您知道内容区域的大小，或者您可以使用flexbox。

 self.gradientview.backgroundColor = UIColor.clear
 self.gradientview.layer.sublayers = nil

 UIView.animate(withDuration: 1, delay: 0.0, options:[.repeat, .autoreverse], animations: {

            self.gradientview.gradientBackground(from: color, to: UIColor.white, direction: GradientDirection.leftToRight)


   }, completion:nil)

https://jsfiddle.net/zx2mcxuq/1/

Answer 3

这应该这样做：https://jsfiddle.net/vgnfq98L/

#WindowContent {
  padding: 0px;
  overflow-y: scroll;
  height:300px;
  padding-top:20px;
  position:relative;
  z-index:1;
}

#WindowTitleBar {
  width: 100%;
  height:auto;
  background: #E6E6E6;
  text-align:center; 
  display: inline-block;
  position:absolute;
  top:0;
  z-index:2;

  border-bottom: 1px solid #000000;
}

将顶部栏位置设为绝对位置，将内容窗口填充到顶部，使其不会在顶栏下方滑动。然后给内容设置一个高度，以便滚动。

将div高度拟合为固定父级

3 个答案: