0

我正在尝试使用 CSS、DIV 和 Materialize SideNav 制作屏幕。我想做的是这样的：

在此处输入图像描述

这是我的代码：

#header{
     background-color: lightgray;
     width:100%;
     height:10%;
     text-align: center;
}

#left-menu{
     float:left;
     width:20%;
     background-color: red;
}
#content{
     float:left;
     width:100%;
     background-color: blue;
}
</head>
	<body>
		<div id="header">
			<table>
				<tr>
					<td style="width: 33.3%";"><div><img src="img/main_logo.png" width="300px" height="60" style="vertical-align: middle"/></div></td>               
					<td style="width: 33.3%;";><div style="font-size:32px;" align="center">MAIN TITLE</div></td>
					<td style="width: 33.3%";></td>
				</tr>
			</table>
		</div>
		<div id="left-menu">
			<ul id="slide-out" class="side-nav fixed">
				<li>
					<div class="userView">
						<img class="background" src="http://placehold.it/350x150">
						<a href="#!user"><img class="circle" src="http://placehold.it/350x300"></a>
						<a href="#!name"><span class="white-text name">John Doe</span></a>
						<a href="#!email"><span class="white-text email">jdandturk@gmail.com</span></a>
					</div>
				</li>
				<li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
				<li><a href="#!">Second Link</a></li>
				<li><div class="divider"></div></li>
				<li><a class="subheader">Subheader</a></li>
				<li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
			</ul>
		</div>
		
		<div id="content">
		</div>

但我的输出不是我所期望的，SideNav 不适合 DIV。相反，它也进一步延伸到标题中，此外，内容 div 没有宽度，SideNav 显示一个滚动条。我需要弄清楚我做错了什么。

这是我的结果：

在此处输入图像描述

4

1 回答 1

0

我在您的代码中尝试的是在标题、左侧菜单和内容样式（css）中放置绝对位置。

在此处输入图像描述 请参阅下面的代码

<html>
    <head>
        <style>
            #header{
               left: 0;
               right:0;
               top: 0;
               position:absolute;
               background-color: lightgray;
               width:100%;
               height:10%;
               text-align: center;
            }

            #left-menu{
                position:absolute;
                left: 0;
                top:92px; bottom: 0;
                width: 400px;
                background-color: red;
            }

            #content{
                 position: absolute;
                 left: 400px;
                 top:92px; right:0; bottom:0;
                 background-color: blue;
            }
        </style>
    </head>
    <body>
        <div id="header">
            <table>
                <tr>
                <td style="width: 33.3%";">
                    <div>
                        <img src="img/main_logo.png" width="300px" height="60" style="vertical-align: middle"/>
                    </div>
                </td>               
                <td style="width: 33.3%;";>
                    <div style="font-size:32px;" align="center">MAIN TITLE</div>
                </td>
                <td style="width: 33.3%";></td>
                </tr>
            </table>
        </div>

        <div id="left-menu">
            <ul id="slide-out" class="side-nav fixed">
                <li>
                    <div class="userView">
                    <img class="background" src="http://placehold.it/350x150">
                    <a href="#!user"><img class="circle" src="http://placehold.it/350x300"></a>
                    <a href="#!name"><span class="white-text name">John Doe</span></a>
                    <a href="#!email"><span class="white-text email">jdandturk@gmail.com</span></a>
                </div>
            </li>
                <li>
                <a href="#!">
                    <i class="material-icons">cloud</i>First Link With Icon</a>
                </li>
                <li><a href="#!">Second Link</a></li>
                <li><div class="divider"></div></li>
                <li><a class="subheader">Subheader</a></li>
                <li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
            </ul>
        </div>

        <div id="content">
            <h1>Your content goes here</h1>
        </div>
    </body>
</html>
于 2019-03-08T09:19:51.243 回答