如何在不使用表或JavaScript的情况下实现以下结构?白色边界代表div的边缘,与问题无关。

中间区域的大小会有所变化,但它会有精确的像素值,整个结构应该根据这些值缩放。为了简化它,我需要一种方法来设置“100% - n像素”的宽度为上-中和下-中div。

我很欣赏一个干净的跨浏览器解决方案,但如果不可能,CSS黑客也可以。

这里有个奖励。另一种结构我一直在挣扎,最终使用表格或JavaScript。它略有不同,但引入了新的问题。我主要是在基于jquery的窗口系统中使用它,但我想保持脚本的布局,只控制一个元素的大小(中间的一个)。


当前回答

我也遇到过类似的问题,即我想要在屏幕顶部设置一个横幅,该横幅的左边有一个图像,而右边的屏幕边缘则有一个重复的图像。最后我是这样解决的:

CSS:

.banner_left {
position: absolute;
top: 0px;
left: 0px;
width: 131px;
height: 150px;
background-image: url("left_image.jpg");
background-repeat: no-repeat;
}

.banner_right {
position: absolute;
top: 0px;
left: 131px;
right: 0px;
height: 150px;
background-image: url("right_repeating_image.jpg");
background-repeat: repeat-x;
background-position: top left;
}

钥匙是正确的标签。我基本上指定我想让它从左边131px到右边0px重复。

其他回答

我也遇到过类似的问题,即我想要在屏幕顶部设置一个横幅,该横幅的左边有一个图像,而右边的屏幕边缘则有一个重复的图像。最后我是这样解决的:

CSS:

.banner_left {
position: absolute;
top: 0px;
left: 0px;
width: 131px;
height: 150px;
background-image: url("left_image.jpg");
background-repeat: no-repeat;
}

.banner_right {
position: absolute;
top: 0px;
left: 131px;
right: 0px;
height: 150px;
background-image: url("right_repeating_image.jpg");
background-repeat: repeat-x;
background-position: top left;
}

钥匙是正确的标签。我基本上指定我想让它从左边131px到右边0px重复。

我们可以很容易地使用flex-box来实现这一点。

如果我们有三个元素,Header, MiddleContainer和Footer。我们想给页眉和页脚一些固定的高度。然后我们可以这样写:

对于React/RN(默认是'display' as flex和'flexDirection' as column),在web css中,我们必须指定包含这些的体容器或容器为display: 'flex', flex-direction: 'column',如下所示:

    container-containing-these-elements: {
     display: flex,
     flex-direction: column
    }
    header: {
     height: 40,
    },
    middle-container: {
     flex: 1, // this will take the rest of the space available.
    },
    footer: {
     height: 100,
    }

如果你的包装div是100%,你使用填充像素量,那么如果填充#需要是动态的,你可以很容易地使用jQuery修改你的填充量当你的事件触发。

在某些情况下,你可以利用边距设置来有效地指定“100%宽度减去N像素”。请看这个问题的公认答案。

我刚刚偶然发现的新方法:css calc():

.calculated-width {
    width: -webkit-calc(100% - 100px);
    width:    -moz-calc(100% - 100px);
    width:         calc(100% - 100px);
}​

css宽度100%减去100px