这可能是已经解决了几十次的事情的变化,但CSS真的让我觉得自己像个傻瓜.
我正在尝试构建一个可以通过各种方式定位和调整大小的小部件.这是一个非常简单的布局 - 固定高度的标题,固定高度的页脚,以及占据剩余空间的主体.整体宽度和高度各不相同.身体的内容需要滚动.我有整体容器,页眉,页脚和身体尺寸确定.
但我想要的是身体在需要时滚动当滚动条出现时不向左缩小内容.也就是说,我希望身体尽可能宽,以便滚动它所需的滚动条,这样当它需要滚动时就没有收缩.实际上,我想要这个:
| - - - unknown width - - -|
+--------------------------+
| content |*|
| might |*|
| scroll |*|
+--------------------------+
我希望可以滚动的内容尽可能宽,以减少潜在的滚动条宽度(|*|区域).
我现在拥有的是这样的:
<div id="content" style="position: absolute; overflow-y: auto; width: 100%">
<div id="scrollContent" style="???">
</div>
</div>
我已经尝试了边距,填充,甚至是最内部div的%-width和所有"做转移"的事情.我还需要这个在FF3,IE7/8和(幻想？)IE6中工作.
cas*_*nca 14
使用overflow: scroll而不是overflow: auto- 这将强制滚动条始终显示.
Mattias Ottosson对另一个问题的回答提供了一条关键信息——vw单位基于视口宽度，包括滚动条，而百分比将基于可用宽度，不包括滚动条占用的空间。换句话说，对于占据页面全宽的元素，滚动条的宽度可以表示为calc(100vw - 100%)
如果我们有一个占据100%可用宽度的顶级元素，那么我们可以使用它来控制滚动条可见时更改大小的内容。假设我们的目标布局是这样的：
.app {
display: grid;
grid-template-columns: 1fr 50vh 1fr;
}
我们希望中间列的宽度为视口高度的 50%，其余的宽度在左列和右列之间划分。如果我们使用它，那么添加滚动条意味着滚动条丢失的水平空间（在 chrome 上约为 15px）从左右列的宽度中相等地取出。当 ui 更改导致滚动条出现而网格中的主要内容保持相同或相似时，这可能会导致丑陋的转变。请参阅下面的第一个片段。
我们可以使用滚动条的计算宽度来代替仅缩小右列：
.app {
display: grid;
grid-template-columns: calc((100vw - 50vh)/2) 50vh calc(100% - (50vh + 100vw)/2);
}
请参阅下面的第二个片段。不幸的是，这意味着fr不能使用单位，必须手动指定更多的列宽。在这种情况下，左列的宽度是视口宽度的一半减去50vh中心列所占用的宽度。右列的宽度是可用宽度（100%而不是100vw）减去左列和中列的组合宽度后剩余的空间。这在公式中更清楚：
calc(100% - ((100vw - 50vh)/2) - (50vh))
这减少到上面的那个
第一个片段，滚动条出现时的丑陋跳转
.app {
display: grid;
grid-template-columns: 1fr 50vh 1fr;
}
.app {
display: grid;
grid-template-columns: calc((100vw - 50vh)/2) 50vh calc(100% - (50vh + 100vw)/2);
}
calc(100% - ((100vw - 50vh)/2) - (50vh))
第二个片段，当滚动条出现时右列缩小
$('button').click(() => {
$('.footer').toggle()
})body, html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
overflow: auto;
font-family: 'Archivo', sans-serif ;
}
.app {
margin: auto;
display: grid;
grid-template-columns: 1fr 50vh 1fr;
text-align: center;
height: 100%;
width: calc(100% - 10px);
}
.left-column, .center-column, .right-column {
padding: 10px;
min-height: 50vh;
border: 1px solid black;
}
.left-column {
border-right: none;
background-color:#def;
}
.center-column {
background-color:#e1ebbd;
}
.right-column {
text-align: left;
border-left: none;
background: #fb1;
}
.footer {
grid-column: 1 / span 3;
height: 2000px;
background: #753;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="app">
<div class="left-column">
Left
</div>
<div class="center-column">
Center
<script src="https://code.jquery.com/jquery-3.1.0.js"></script><br>
<button>Toggle footer</button>
</div>
<div class="right-column">
Right
</div>
<div class="footer">
</div>
</div>
</body>
</html>| 归档时间： |
|
| 查看次数： |
30363 次 |
| 最近记录： |