Question

我创建了一个页面，其中静态图像位于浏览器的全高度（在其上方具有渐变）和左侧的文本块。我希望图像使用浏览器窗口调整大小，但是我不希望图像在文本后面或者比文本小。当我在身体上设置最小宽度和最小高度时，例如1024x768，这不能解决问题。难道我做错了什么？我应该怎么做呢？

提前致谢！

这是我的代码：

<style type="text/css">
html, body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    min-width: 1024px;
    min-height: 768px;
}
#background-image {
    position: absolute;
    right: 0;
    top: 0; 
    height: 100%;
    background-image: url('image.jpg');
    z-index: -1;
}
#background-gradient {
    position: absolute;
    right: 0;
    top: 0; 
    z-index: 0;
    height: 100%;
}
#content {
    position: absolute;
    left: 15%;
    top: 15%;
    width: 500px;
    font-family: Georgia;
    font-size: 16px;
}
p.dropcap:first-letter {
    float: left;
    font-size: 50px;
    line-height: 30px;
    padding-top: 2px;
    padding-right: 4px;
    font-family: Georgia;
}
h1 {
    font-size: 55px;    
}
</style>
</head>

<body>
<img id="background-image" src="image.jpg" />
<img id="background-gradient" src="gradient.png" />
<div id="content">
<h1>[TITLE]</h1>
<p class="dropcap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nibh lectus, vehicula quis elementum nec, pellentesque vitae est. In in libero pulvinar felis ultrices varius vel at augue. Suspendisse sollicitudin risus eu mauris ultrices nec auctor neque facilisis. Pellentesque commodo tellus quam. Praesent dictum sodales nisi, id tempor neque hendrerit id. Ut non mi a ante pulvinar tempor. Morbi scelerisque metus eu sem iaculis hendrerit. Integer pulvinar ipsum quis ante tincidunt gravida.</p>
<p>Nullam vel tellus sed mauris sagittis egestas at sed lacus. Pellentesque sit amet justo felis. Donec sit amet est in urna consectetur convallis vitae id justo. Sed adipiscing accumsan augue, at cursus lorem bibendum nec. Etiam diam odio, sagittis ut tempor fermentum, elementum eu erat. Vivamus pharetra, nibh vel elementum pulvinar, risus leo ornare felis, eget tincidunt velit odio non turpis. Proin semper metus eget nisi varius varius elementum nisl eleifend. Nulla facilisi. Suspendisse urna sapien, pulvinar non porttitor pellentesque, laoreet id leo. Praesent sed tortor quis tellus eleifend ultricies et eu eros. Sed massa eros, hendrerit eu facilisis sed, fermentum sit amet purus. Nulla aliquam eleifend ante, tincidunt pulvinar dolor elementum eu. Proin quis justo in arcu sollicitudin faucibus ac tincidunt ligula.</p>
</div>
</body>

Answer 1

将所有HTML代码放在直接位于container内的body div中。然后，您可以将CSS代码从body移动到#container，如下所示：

#container {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    min-width: 1024px;
    min-height: 768px;
}

IIRC你不能在身上设置min-width。但是你要小心，因为早期版本的IE不支持min-width。

Answer 2

只是漂浮：右和漂浮：左并添加一个余量，使其具有以前的外观
Demo

为BODY设置最小宽度和高度

2 个答案: