Материализация SideNav исправлена ​​не подходит в div - PullRequest
Новая
       24

Материализация SideNav исправлена ​​не подходит в div

0 голосов
/ 08 марта 2019

Я пытаюсь сделать экран, используя CSS, DIVs и Materialise SideNav.Я пытаюсь сделать что-то вроде этого:

enter image description here

Это мой код: 

#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 показывает полосу прокрутки.Мне нужно выяснить, что я делаю неправильно.

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

enter image description here

1 Ответ

0 голосов
/ 08 марта 2019

То, что я пробовал в вашем коде, это поместить абсолютную позицию в заголовок, левое меню и стиль содержимого (css).

enter image description here Смотрите код ниже 

<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>
...