无法使用CSS调整主体宽度

Question

我需要主体具有银色背景并且只填充页面的75％。也就是说，只有75％的页面被涂成银色，而剩下的部分未被使用，并根据broswer的默认设置进行了涂色。页面的左侧部分是我的BODY，右侧部分未使用。我试过

body { 
    background-color: silver; 
    width: 75%; 
} 

但是整个页面仍然是银色的。我怎样才能完成我的任务？

Answer 1

您需要设置两个html和body背景颜色。

除了已经设置了100%高度的html元素和100%或100vh一个min-height到body，使其常常充满屏幕的整个高度。

padding: 0和margin: 0很重要，因此您的body和窗口之间不会有边框。

但是，奖励这只适用于现代浏览器。我现在无法测试旧版浏览器，但它会假定在版本9或10以下的IE中会出现问题。

因此，如果您还想支持旧浏览器，则需要使用解决方案由其他答案提供，并使用div作为您的内容的容器。

html { 
 
    background-color: white; 
 
    height: 100%; 
 
    padding: 0; 
 
} 
 

 
body { 
 
    background-color: silver; 
 
    width: 75%; 
 
    min-height: 100%; 
 
    margin: 0; 
 
} 
 

 
div { 
 
    height: 500px; 
 
    width: 50px; 
 
    background-color: red; 
 
}

<div> 
 
    test 
 
</div>

Answer 2

那不是它是如何工作的。 ü可以使用的容器作为

<div id="container"></div> 
#container{ 
    background-color: silver; 
    width: 75%; 
} 

Answer 3

你必须使用一个div容器用于此目的：

body { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
div { 
 
    min-height: 100vh; 
 
    background-color: silver; 
 
    width: 75%; 
 
}

<div></div>

另一种方法（如果你不需要右边框为内容）将使用背景渐变：

html { 
 
    height: 100%; 
 
} 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    background: -webkit-linear-gradient(left, silver 0%, silver 75%, white 75%); 
 
    background: linear-gradient(to right, silver 0%, silver 75%, white 75%); 
 
}