Question

我是HTML / CSS的新手，我不知道如何制作我在标题中写的内容。我的意思是，它之前正在工作，现在我一定搞砸了，它停止了工作。

我的代码比这更大，但其余部分被评论说它没有被使用。

＆＃13;

body {
        background-color: red;
        margin: 0em;

    }
    
    #main {
        background-color: #E3E3E3;
        width: 75%;
        margin: auto;
        height: 100%;
    }

＆＃13;

    <html>
    	<head>
    	</head>
    	<body>
    	    <div id="main">
    	    </div>
    	</body>
    <html>

＆＃13;

该代码不应该创造我想要的东西吗？当我将高度设置为em / px时，它可以工作，但不是百分比，尽管它们在宽度上工作。

我的背景颜色为红色，以便顺便分辨它们。

我做错了什么？

Answer 1

您需要将体宽和高度设置为100％。

body {
background-color: red;
margin: 0em;
width:100%;
height:100%;


}

#main {
background-color: #E3E3E3;
width: 75%;
margin: auto;
height: 100%;
}

由于文档正文中没有文本或树，因此高度将会崩溃。

Answer 2

这样做：

#main {
    background-color: #E3E3E3;
    width: 75%;
    margin: auto;
    height: 100%;
    position: absolute;
    top: 0; /* Top as suggested by t.niese */
    left: 18%; /* Adjust the value as needed to get it to be centered */
}

See working example

注意：设置正文尺寸非常重要，如magnetwd所述

创建一个占据100％高度和75％宽度的div

2 个答案: