HTML5 MVC 3 левая навигационная раскладка - PullRequest
Новая
       3

HTML5 MVC 3 левая навигационная раскладка

0 голосов
/ 04 июля 2011

Я создаю новое веб-приложение с использованием ASP.NET MVC3 Razor и HTML 5.

Я знаю, что еще не все браузеры поддерживают HTML5, но все же я хотел бы попробовать его.

Кто-нибудь сделал какую-либо страницу с левой навигационной версткой?Мне нужен интерфейс, похожий на Gmail (или внешний вид), с полноразмерной панелью навигации слева и содержимым страницы, занимающим все доступное пространство справа.

какие-либо руководящие указания о том, как это сделать?

Ответы [ 2 ]

5 голосов
/ 04 июля 2011

Все, что вам нужно, это пара CSS-конструкций для достижения желаемого результата: 

#left { float:left; width: 200px; }
#rest { margin-left: 200px; }

Тогда ваш html будет выглядеть примерно так: 

<div id="left">...</div><div id="rest">...</div>

И, насколько язнаете, это вообще не зависит от HTML5 (учитывая свободное определение HTML5, где обычно включен CSS3 ...).

0 голосов
/ 23 мая 2014

Как сказал Мигель, это всего лишь вопрос CSS, чтобы достичь полной высоты, вам нужно добавить пару свойств CSS.Это будет ваш CSS-файл style.css: 

html {
    width: 100%;
    height: 100%;
}
body {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
}
.left {
    position: relative;
    float: left;
    width: 200px;
    height: 100%;
    background-color: lightblue;
}
.rest {
    position: relative;
    margin-left: 200px;
    height: 100%;
    background-color: gold;
}

И ваш HTML-файл будет следующим: 

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="left">your menu here</div>
        <div class="rest">your content here</div>
    </body>
</html>

Вы можете найти plunkr по этому адресу plunkr

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...