Occupy width from sibling of parent with CSS

2019-02-28 08:07发布

站内问答 / HTML/CSS
606 1 4

As per HTML5 tag semantics, I designed a web page. A basic structure of the HTML body is as follows

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

The end website should have a standard look as follows

enter image description here

I thought of semantics and wrote the left navigation panel (.nav-primary > .nav-side) inside the 'nav' element.

Is there any method by which I can structure the left navigation panel to take up a certain percent of width of section content (.section-content).

Like, I don't want the left navigation panel to be placed above the section content (using fixed position or something). It has to be placed left of the section content sharing the total width using the same HTML structure.

Thanks in Advance

标签： html css sass
举报
1条回答
够拽才男人
2楼-- · 2019-02-28 08:45

You can combine the use of CSS-grid and display:contents (https://caniuse.com/#feat=css-display-contents) to achieve this by keeping the same HTML structure:

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>

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)