CSS：将宽度/高度设置为百分比减去像素-Java 学习之路

411

我已经在其他几个背景下看过这个问题了，但我认为值得再次询问我的具体案例 . 我正在尝试创建一些可重用的CSS类，以便在我的网站上实现更高的一致性和更少的混乱，而且我一直试图标准化我经常使用的一件事 .

我有一个容器div，我不想设置它的高度（因为它会根据网站的位置而有所不同），里面是一个 Headers div，然后是一个无序的项目列表，全部都是CSS适用于他们 . 看起来很像这样：

Widget

我希望无序列表占用容器div中的剩余空间，知道 Headers div是18px高 . 我只是不知道如何将列表的高度指定为“100％减去18px的结果” . 有没有人在这种情况下有任何建议？

11 回答

5
- 在您想要减去像素的元素上使用负边距 . （所需元素）
- 在包含元素上生成 overflow:hidden;
- 在所需元素上切换到 overflow:auto; .
它对我有用！
回复于 2024-05-07T02:44:34+08:00
8
谢谢，我在你的帮助下解决了我的问题，调整了一点，因为我想要一个div 100％宽度100％高度（底部条的高度较少）并且身体没有滚动（没有黑客/隐藏滚动条） .

对于CSS：
```
html{
  width:100%;height:100%;margin:0px;border:0px;padding:0px;
 }
 body{
  position:relative;width:100%;height:100%;margin:0px;border:0px;padding:0px;
 }
 div.adjusted{
  position:absolute;width:auto;height:auto;left:0px;right:0px;top:0px;bottom:36px;margin:0px;border:0px;padding:0px;
 }
 div.the_bottom_bar{
  width:100%;height:31px;margin:0px;border:0px;padding:0px;
}
```
对于HTML：
```
<body>
<div class="adjusted">
 // My elements that go on dynamic size area
 <div class="the_bottom_bar">
  // My elements that goes on bottom bar (fixed heigh of 31 pixels)
 </div>  
</div>
```
这就是诀窍，哦，是的，我把div.adjusted的值设置为底部高于底部条形高度，否则出现垂直滚动条，我调整为最接近的值 .

这种差异是因为动态区域中的一个元素是添加了一个额外的底洞，我不知道如何摆脱......它是一个视频标签（HTML5），请注意我把这个视频标签与此css（所以它没有理由制作一个底洞，但确实如此）：
```
video{
  width:100%;height:100%;margin:0px;border:0px;padding:0px;
 }
```
目标：有一个视频占用100％的浏览器（并在浏览器调整大小时动态调整大小，但不改变宽高比）减去我用于带有一些文本，按钮等的div的底部空间（和验证器） w3c＆css当然） .

编辑：我发现原因，视频标签就像文本，而不是块元素，所以我用这个css修复它：
```
video{
  display:block;width:100%;height:100%;margin:0px;border:0px;padding:0px;
 }
```
请注意视频标记上的 display:block; .
回复于 2024-05-07T02:44:34+08:00
0
我为此使用Jquery
```
function setSizes() {
   var containerHeight = $("#listContainer").height();
   $("#myList").height(containerHeight - 18);
}
```
然后我绑定窗口调整大小以重新调整浏览器窗口大小（如果容器的大小更改窗口调整大小）
```
$(window).resize(function() { setSizes(); });
```
回复于 2024-05-07T02:44:34+08:00
68
我尝试了其他一些答案，但没有一个能够完全符合我的要求 . 我们的情况非常相似，我们有一个窗口 Headers ，窗口可以调整窗体中的图像 . 我们想要锁定调整大小的宽高比，而不需要添加计算来考虑 Headers 的固定大小，并且仍然让图像填充窗体 .

下面我创建了一个非常简单的代码片段，它显示了我们最终做的事情似乎对我们的情况很有效，并且应该在大多数浏览器中兼容 .

在我们的窗口元素上，我们添加了20px的边距，这有助于相对于屏幕上的其他元素进行定位，但不会影响窗口的“大小” . 然后绝对定位窗口 Headers （将其从其他元素的流中移除，因此它不会导致其他元素如无序列表被移位）并且其顶部位于-20px，这将 Headers 置于边距内的窗口 . 最后我们的ul元素被添加到窗口，高度可以设置为100％，这将使它填充窗口的主体（不包括边距） .
```
*,*:before,*:after
{
  box-sizing: border-box;
}

.window
{
  position: relative;
  top: 20px;
  left: 50px;
  margin-top: 20px;
  width: 150px;
  height: 150px;
}

.window-header
{
  position: absolute;
  top: -20px;
  height: 20px;
  border: 2px solid black;
  width: 100%;
}

ul
{
  border: 5px dashed gray;
  height: 100%;
}
```
```
<div class="window">
  <div class="window-header">Hey this is a header</div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>
</div>
```
回复于 2024-05-07T02:44:34+08:00

尝试盒子大小 . 对于列表：

height: 100%;
/* Presuming 10px header height */
padding-top: 10px;
/* Firefox */
-moz-box-sizing: border-box;
/* WebKit */
-webkit-box-sizing: border-box;
/* Standard */
box-sizing: border-box;

对于 Headers ：

position: absolute;
left: 0;
top: 0;
height: 10px;

当然，父容器应该具有以下内容：

position: relative;

回复于 2024-05-07T02:44:34+08:00

7
我意识到这是一篇很老的帖子，但鉴于它没有被建议，值得一提的是，如果你正在为CSS3兼容的浏览器编写，你可以使用 calc ：
```
height: calc(100% - 18px);
```
值得注意的是，并非所有浏览器当前都支持标准的CSS3 calc（）函数，因此可能需要实现特定于浏览器的函数版本，如下所示：
```
/* Firefox */
height: -moz-calc(100% - 18px);
/* WebKit */
height: -webkit-calc(100% - 18px);
/* Opera */
height: -o-calc(100% - 18px);
/* Standard */
height: calc(100% - 18px);
```
回复于 2024-05-07T02:44:34+08:00
769

我不确定这是否适用于您的特定情况，但我发现如果包含div是固定大小，内部div上的填充将推送div内部的内容 . 你必须要浮动或绝对定位你的 Headers 元素，否则，我没有尝试过这个可变大小的div .

回复于 2024-05-07T02:44:34+08:00
2
对于一些不同的方法，您可以在列表中使用这样的东西：
```
position: absolute;
top: 18px;
bottom: 0px;
width: 100%;
```
只要父容器有 position: relative; ，这就可以工作
回复于 2024-05-07T02:44:34+08:00
1
设定17px Headers 高度

列出css：
```
height: 100%;
padding-top: 17px;
```
Headers css：
```
height: 17px;
float: left;
width: 100%;
```
回复于 2024-05-07T02:44:34+08:00
15
实现相同目标的另一种方法： flex boxes . 使容器成为列弹性框，然后您可以自由地允许某些元素具有固定大小（默认行为）或填充/缩小到容器空间（使用flex-grow：1和flex-收缩：1） .
```
#wrap {        
  display:flex;
  flex-direction:column;
}
.extendOrShrink {
  flex-shrink:1;
  flex-grow:1;
  overflow:auto;
}
```
请参阅https://jsfiddle.net/2Lmodwxk/（尝试扩展或缩小窗口以注意效果）

注意：您也可以使用速记属性：
```
flex:1 1 auto;
```
回复于 2024-05-07T02:44:34+08:00
24
不要将高度定义为百分比，只需设置 top=0 和 bottom=0 ，如下所示：
```
#div {
   top: 0; bottom: 0;
   position: absolute;
   width: 100%;
}
```
回复于 2024-05-07T02:44:34+08:00

CSS：将宽度/高度设置为百分比减去像素

11 回答

相关问题