Question

我正在尝试制作一个网页，它将保持一定的宽度和高度，以像素为单位（宽度= 1000像素，高度= 700像素）。如果查看它的屏幕小于所需的宽度和/或高度，它将设置滚动条以使页面具有宽度和高度，并且屏幕将一次仅显示其一部分。我希望能够用css做到这一点，但如果我必须使用html或（不是那么优选）JavaScript，请向社区提供您的想法。我尝试了多种css想法：

html{
 min-width:800px;
    width: auto !important;
    width:800px;
}

和

html{
max-height: 1000px;
height: 500px;
max-width: 1000px;
}

和许多其他但类似的代码片段但没有一个有效。谢谢你的时间和帮助！

以下是我的网页代码：

<!DOCTYPE html>
<html>

<head>
<title>Home Page</title>
    <style>

        html{background: url(https://pbs.twimg.com/profile_images/456819436259778561/cwlr2jqr.jpeg) no-repeat top center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
 }



        #opacity{
   z-index: -1; 
width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
  background-color: #ffffff;
  opacity:.80;
  filter:alpha(opacity=60);
}

#headerBox{

z-index: 2; 
width: 50%; 
    height: 9%; 
    position: fixed; 
    left: 25%; 
    top: 0%; 
  background-color: #000000;

}


.headerBoxTitle{
color:  #ffffff;
 font-family:"Lucida Console", Monaco, monospace;
 font-size: 200%;
text-align: center;
}



#galore{
z-index: 3;
 width: 80%; 
 height: 80%;
 position: fixed;
 left: 10%;
 top: 20%;
 background-color: #BFC2C6;
 opacity:.60;
 filter:alpha(opacity=60);
}

#pic{
z-index:4;
width:80%;
height:80%;
max-width: 80%;
max-height: 80%;
 top: 20%; 
 left:10%;
position: absolute;
}

div.menue{
position:fixed;
top: 10%;
background-color: #000000;
width: 100%; 
height: 30px;
}

div.menue ul{
 list-style-type:none;
margin:0;
padding:0;
display:table;
margin:0 auto;
}

div.menue li
{
  float:left;
}

div.menue a
{
display:block;
width:100px;
}

div.menue a:link,div.menue a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#000000;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}

div.menue a:hover,div.menue a:active
{
background-color:#8A8A8A;
}

    </style>

</head>

<body>

    <div id = "opacity">


    <div id = "headerBox">
<h1 class = "headerBoxTitle"> leonardo da Vinci</h1>

</div>





</div>

<div class = menue>
<ul>
<li> <a href="https://1e7bb3c72102eda9302c0c46997be5cac6ab2165.googledrive.com/host/0BxnxmRIcsAqhfm9Xa3oyMmlOZVZqeFZCekdEQUcwZm5yQ2ZNX3kwSWxzbVJPcU12S2R1R3c/homepPage.html">Home</a></li>

<li> <a href="https://1e7bb3c72102eda9302c0c46997be5cac6ab2165.googledrive.com/host/0BxnxmRIcsAqhfm9Xa3oyMmlOZVZqeFZCekdEQUcwZm5yQ2ZNX3kwSWxzbVJPcU12S2R1R3c/galore.html">Galore</a></li>

<li> <a href="https://www.youtube.com/">Contact</a></li>
<li> <a href="https://www.youtube.com/">News</a></li>
</ul>
    </div>

<div id="galore">


 </div> 

     <div id = "pic">


 <a href="https://www.youtube.com/" id = "lisa">
  <img src="http://webneel.com/daily/sites/default/files/images/daily/10-2013/4-leonardo-da-vinci-mona-lisa.preview.jpg"  alt="can not display this image" style="max-height: 60%; max-width:90%; border: 5px outset #CCBCA3; padding:0px;  position:absolute; left:10%; top:10%; border: outset 7px solid #CA935C;">
</a>

<a href="https://www.youtube.com/" id = "lisa">
  <img src="http://webneel.com/daily/sites/default/files/images/daily/10-2013/4-leonardo-da-vinci-mona-lisa.preview.jpg"  alt="can not display this image" style="max-height: 60%; max-width:90%; border: 5px outset #CCBCA3; padding:0px; left:50%; top:10%; position:absolute; border: outset 7px solid #CA935C;">
</a>


</div>
</body>
</html>

Answer 1

要设置您网站的width和height，您只需使用

即可

html, body {
  width: 1000px;
  height: 700px;
 }

或者，如果您希望将这些值设置为最大宽度和高度，则可以使用：

html, body {
  max-width: 1000px;
  max-height: 700px;
}

但是，如果您想阻止移动设备缩减，可以在head部分添加：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

在您自己提供的两个示例中，您使用!important覆盖了值，它告诉浏览器更喜欢这个css标记，忽略其他所有内容。

Answer 2

您可以使用viewport meta tag。在<head>：

中添加以下内容

<meta name=viewport content="initial-scale=1">

这将告诉浏览器不要尝试缩小以适应屏幕。

Answer 3

您可以使用正文中的min-width

body{
min-width:1100px;
}

即使查看的网页较小，如何使网页保持一定的大小

3 个答案: