Займите ширину от родного брата с CSS - PullRequest
Новая
       8

Займите ширину от родного брата с CSS

0 голосов
/ 05 декабря 2018

В соответствии с семантикой тега HTML5 я разработал веб-страницу.Основная структура тела HTML выглядит следующим образом: 

<nav class="nav-primary">
 <div class="heading-primary">
   <!-- Logo & links of webpage -->
 </div>
 <div class="nav-side">
   <!-- Left side navigation of the page -->
 </div>
</nav>
<section class="section-content">
  <!-- Contents of the web page -->
</section>

Конечный веб-сайт должен выглядеть следующим образом:

enter image description here

Я подумал о семантике и написал левую панель навигации (.nav-primary> .nav-side) внутри элемента nav.

Есть ли какой-нибудь метод, с помощью которого я могу структурировать левую панель навигации так, чтобы она занималаопределенный процент ширины содержимого раздела (.section-content).

Например, я не хочу, чтобы левая панель навигации размещалась над содержимым раздела ( с использованием фиксированной позиции или чего-то подобного ).Он должен располагаться слева от содержимого раздела с общей шириной, используя ту же структуру HTML.

Заранее спасибо

1 Ответ

0 голосов
/ 05 декабря 2018

Вы можете комбинировать использование CSS-сетки и display:contents (https://caniuse.com/#feat=css-display-contents) для достижения этой цели, сохраняя ту же структуру HTML: 

body {
  margin:0;
  height:100vh;
  display:grid;
  grid-template-rows: 50px 1fr;
  grid-template-columns: 100px 1fr;
  grid-template-areas: 
    "header header"
    "side content";
}
nav.nav-primary {
  display:contents;
}
.heading-primary {
  grid-area:header;
  background:red;
}
.nav-side {
  grid-area:side;
  background:blue;
}
.section-content {
  grid-area:content;
  background:green;
}
<body>
  <nav class="nav-primary">
    <div class="heading-primary">
      <!-- Logo & links of webpage -->
    </div>
    <div class="nav-side">
      <!-- Left side navigation of the page -->
    </div>
  </nav>
  <section class="section-content">
    <!-- Contents of the web page -->
  </section>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...