- 我需要制作具有最小宽度和最小高度但会扩展到浏览器大小的 80% 的 CSS 布局。
- 主 div 将具有圆角（使用图像，因为不支持 CSS3） - 但是，也有图像在顶部和底部以及左侧和右侧的角之间运行。这也提供了阴影效果。
- 挑战在于，因为我有 div which position:relative 和我的角落是 position: absolute （此时一切都很好），但是我希望我的中间图像扩展以填充角落之间的空间。除了这不能正常工作外，它会延伸到 div 的末尾。
- 我对一种全新的方法持开放态度，我在下面包含图像和代码，但可以随意解决代码使用背景颜色与必须使用我的图像。
这是我想要实现的目标：
以下是容器的图像：
这是一些代码...
HTML：
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="pageWrapper">
<div class="contentWrapper">
<span class="top-left"></span>
<span class="top-middle"></span>
<span class="top-right"></span>
<span class="bottom-left"></span>
<span class="bottom-middle"></span>
<span class="bottom-right"></span>
<div class="content">
<p>
Lorem ipsum dotor sit amet, consectetur adipiscing elit.
Ut viverra lectus vitae est ullamcorper a tempus est commodo.
Phasellus et pulvinar risus. Cras quis aliquet odio. Ut condimentum porta mi ultrices elementum.
Maecenas feugiat magna at tellus convallis congue. Aenean tincidunt rutrum varius. Aenean nec eros id odio dapibus faucibus.
Pellentesque blandit gravida erat id sodales. Etiam nunc odio, pharetra nec aliquam a, gravida at metus. Nullam dapibus vulputate blandit.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ullamcorper lectus ut sapien scelerisque
vitae ullamcorper mauris venenatis.
</p>
</div>
</div>
</div>
</body>
CSS：
body {
background-color: #eeeee7;
}
.pageWrapper {
margin: 0px auto; /* centers the div horizontally */
min-width: 900px;
min-height: 430px;
height: 80%;
width: 80%;
background-color: red;
}
.contentWrapper {
position: relative; /* makes our corners absolute relative to our container not our browser window */
background-color: yellow;
height: 100%;
width: 100%;
padding-right: 34px;
padding-left: 34px;
padding-top: 155px;
}
.top-left,
.top-right {
position: absolute;
height: 155px;
width: 34px;
background-color: blue;
}
.bottom-left,
.bottom-right {
position: absolute;
height: 29px;
width: 34px;
}
.top-left {
top: 0;
left: 0;
background-image:url('images/cornerLeftTop.jpg');
}
.top-right {
top: 0;
right: 0;
background-image:url('images/cornerRightTop.jpg');
}
.bottom-left {
bottom: 0;
left: 0;
background-image:url('images/cornerBottomLeft.jpg');
}
.bottom-right {
bottom: 0;
right: 0;
background-image:url('images/cornerBottomRight.jpg');
}
.top-middle {
position: absolute;
top: 0;
left: 34px;
height: 155px;
width: 100%;
background-image:url('images/headerMiddle.jpg');
}
.bottom-middle {
position: absolute;
bottom: 0;
height: 29px;
width: 100%;
background-image:url('images/footerMiddle.jpg');
}
.middle-left {
}
.middle-right {
}