Demo Fiddle

Question

我正在创建一个可调整大小的<ul>，其中包含2个<li>元素，标题和内容。无论其他元素发生什么，标题应保持固定height: 35px;。我希望内容能够占用<ul>的其余内容。问题是它永远无法填补其余部分，因为它以自己的速度增长，因此底部有<ul>的小范围。我可以使用height: calc(100% - 35px);解决此问题，但支持calc的情况很少。有没有办法用calc来做到这一点？

jsfiddle

Answer 1

您可以像这样使用crosse-browser calc

.foo {
  width: -webkit-calc(100% - 35px); //Chrome
  width: -moz-calc(100% - 35px); //firefox
  width: calc(100% - 35px); //IE
}

或使用JQuery：

document.getElementsByClassName("foo").style.width= window.innerWidth - 35;

Answer 2

Demo Fiddle

不需要calc！

只需将父容器的postion设置为relative，然后将子容设置为absolute，将内容锚定为bottom零和top的35（标题的高度）。

CSS

.resize_container {
    position: fixed !important;
    top: 65% !important;
    left: 0px !important;
}
.container_t {
    list-style: none;
    bottom: 0px;
    left: 0px;
    width: 350px;
    height: 150px;
    background-color: red;
    padding: 0;
    margin: 0;
    position:relative;
}
.header_t {
    width: 100%;
    height: 35px;
    background-color: blue;
    padding: 5px;
    box-sizing: border-box;
    position:absolute;
}
.content_container_t {
    width: 100%;
    background-color: green;
    padding: 5px;
    box-sizing: border-box;
    position:absolute;
    top:35px;
    bottom:0;
}
.ui-resizable-n {
    cursor: n-resize;
    border-top: 5px solid purple;
}
ui-resizable-e {
    cursor: e-resize;
    border-right: 5px solid purple;
}

Answer 3

你可以这样做：

.content_container_t {
    position:absolute;
    top:35px;
    bottom:0;
    left:0;
    right:0;
    overflow: scroll;
}

DEMO

在不使用calc（）的情况下在css中混合百分比和px

3 个答案:

Demo Fiddle