Исправлена ​​​​ошибка Materialize SideNav, которая не помещается в div

Я пытаюсь сделать экран с помощью 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">[email protected]</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 показывает полосу прокрутки. Мне нужно понять, что я делаю неправильно.

Это мой результат:

введите здесь описание изображения


html css materialize sidenav
person Beto Rivera    schedule 07.03.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Что я пробовал в вашем коде, так это поместить абсолютную позицию в заголовок, левое меню и стиль содержимого (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">[email protected]</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>
person afikri    schedule 08.03.2019
comment
Это не работает, меню находится за пределами DIV imgur.com/0keLB0a - person Beto Rivera; 08.03.2019