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


CSS: Setting width/height as Percentage minus pixels

我正在尝试创建一些可重用的CSS类来提高一致性，减少网站上的混乱，并且我一直在努力使我经常使用的一种东西标准化。

我有一个容器，我不想为其设置高度(因为它将根据站点的位置而变化)，它的内部是一个标题，然后是一个无序的项目列表，所有这些都应用了css。

看起来很像这样：

Widget

我希望无序列表占据容器中的剩余空间，因为知道头部是18px高。我只是不知道如何将列表的高度指定为"100%减去18px"。

我在其他几个场合见过这个问题，但我认为对于我的特定案例，值得再问一次。在这种情况下，有人有什么建议吗？

相关讨论

我意识到这是一个旧的邮件，但它并没有被给出的建议是，如果你是值得提写作CSS3兼容的浏览器，你可以使用calc：

1
height: calc(100% - 18px);

值得注意，它需要所有的浏览器支持CSS3目前钙()函数的标准，从而实现浏览器的功能特异性，可能出现以下要求：样

1
2
3
4
5
6
7
8
/* Firefox */
height: -moz-calc(100% - 18px);
/* WebKit */
height: -webkit-calc(100% - 18px);
/* Opera */
height: -o-calc(100% - 18px);
/* Standard */
height: calc(100% - 18px);
相关讨论

在一个不同的方法，你可以使用一些像这样的列表：

1
2
3
4
position: absolute;
top: 18px;
bottom: 0px;
width: 100%;

本公司只要position: relative;父容器。

相关讨论

我使用jQuery这

1
2
3
4
function setSizes() {
   var containerHeight = $("#listContainer").height();
   $("#myList").height(containerHeight - 18);
}

我recalc绑定到它的窗口大小，浏览器，无论是工具窗口(如果容器的大小和窗口大小的变化)

1
$(window).resize(function() { setSizes(); });
相关讨论

Don’t定义的高度设置为比，只是top=0和bottom=0，像这样：

1
2
3
4
5
#div {
   top: 0; bottom: 0;
   position: absolute;
   width: 100%;
}
相关讨论

presuming 17px头高度

CSS列表：

1
2
height: 100%;
padding-top: 17px;

标题：CSS

1
2
3
height: 17px;
float: left;
width: 100%;
相关讨论

  • 在使用负边缘元素你想减去像素的开关。(成本要素)
  • 化妆品含元素overflow:hidden;on the
  • 在切换到overflow:auto;所需的元素。

    • 它为我工作！

    相关讨论

    try胶盒。的列表：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    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;

    的标题：

    1
    2
    3
    4
    position: absolute;
    left: 0;
    top: 0;
    height: 10px;

    当然，父容器应该有什么样的：

    1
    position: relative;

    我想一些其他的答案，没有人会和他们不是我想要的。我们的情况是非常相似的在这里我们有一个窗口和窗口的标题是什么resizable图像窗口的身体。我们想锁定位置面向方面的缩放比计算中不需要添加到帐户的固定大小的报头和安静有填充体的形象窗口。

    下面的代码创建一个简单的第一个节目是我们来做很好的工作和我们的情况应在大多数浏览器兼容。

    在我们的窗口元素添加到一个contributes 20px保证金的其他元素的相对定位在屏幕上，但不以"大小"的窗口。窗口标题(这是当时的位置信息是从流removes其他元素，所以它不会因为其他因素产生的像移列表)和它的顶部是一个地方访问20px头的窗口内的边缘。这是我们的UL元素添加到窗口，和高度可以被设置为100%，因为它希望填充窗口的身体(不包括的保证金)。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    *,*: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%;
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
      Hey this is a header
     
    <ul>

       
    <li>
    Item 1
    </li>

       
    <li>
    Item 2
    </li>

       
    <li>
    Item 3
    </li>

       
    <li>
    Item 4
    </li>

       
    <li>
    Item 5
    </li>

     
    </ul>

    实现相同目标的另一种方法是：弹性盒子。将容器设置为列柔性框，然后您可以自由地允许某些元素具有固定的大小(默认行为)或填充/收缩到容器空间(使用flex grow:1和flex shrink:1)。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    #wrap {        
      display:flex;
      flex-direction:column;
    }
    .extendOrShrink {
      flex-shrink:1;
      flex-grow:1;
      overflow:auto;
    }

    参见https://jsfiddle.net/2lmodwxk/(尝试扩展或缩小窗口以注意效果)

    注意：您也可以使用速记属性：

    1
       flex:1 1 auto;
    相关讨论

    谢谢你的帮助，我就矿山调整它一点，因为我想要一个div(100% 100%宽度高度高度不一底杆)和滚动体(NO在没有黑客/隐藏滚动条)。

    的CSS：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     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的：

    1
    2
    3
    4
    5
    <body>

     // My elements that go on dynamic size area
     
      // My elements that goes on bottom bar (fixed heigh of 31 pixels)

    这是一个把戏，哦，是把一个较大的值比小的在div.adjusted底底高度和酒吧的垂直滚动条出现，否则，一派是最近的价值。

    因为这是一个差分对的动态元素的面积是额外添加到井底，我不知道如何摆脱…这是一个视频的一天(HTML5)，请注意，这一天我把视频的CSS(所以没有理由为它使井底，但它做)：

    1
    2
    3
     video{
      width:100%;height:100%;margin:0px;border:0px;padding:0px;
     }

    视频：《objetive有任务的100%的浏览器(浏览器和resizes dynamically当是包，但没有altering方面比不上《A)空间，我使用一个div和一些文本，按钮等(W3C CSS验证器和&；大学课程)。

    编辑：我找到了原因，视频是不是一天样的文本块元素，这样一本CSS固定它：

    1
    2
    3
     video{
      display:block;width:100%;height:100%;margin:0px;border:0px;padding:0px;
     }

    《display:block;音视频的一天。

    我不知道如果这是工作的情况，但我发现在里面填充内容div想推甲在A如果div div含是一个固定的大小。你会享受到你的头或绝对位置浮动元素，但如果我没有尝试，这为可变大小的div。