CODEWITHSUNDEEP
css
Kevin Ding
Kevin Ding

Reputation: 824

width and height in style doesn't work as I'm expected

I am writing a webpage , and I want to left part is nav page and right part is content page;

and I create a index.html , give a 100vw and 100 vh to container div label;

however when I look the page, the page is displayed not as I expected;

Anyone can help me understand why ?

I have read css width/height definition, can't figure it out by myself. enter image description here

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <% include('./easyui.art') %>
    <title>测试用例管理系统</title>
  </head>
  <body>
    <div class="easyui-layout" style="width: 100vw; height: 100vh">
      <div
        data-options="region:'west', href:'/feature/nav'"
        split="true"
        title="特性列表"
        style="width: 20%; height: 100%"
      >
      <% include('./nav.art') %>
      </div>
      <div
        id="content"
        class="easyui-tabs"
        region="center"
        style="width: 80%; height: 100%; padding: 1px"
      ></div>
    </div>
  </body>
</html>

Upvotes: 0

Views: 94

Answers (1)

Anonymous
Anonymous

Reputation: 1988

  1. You posted ASP or Node inclusions <% ... %> which makes it impossible for other to answer to you faster because you didn't provide simple valid HTML reproducing the issue

  2. I created this pen and tried to add as much comments as possible explaining the styles. The main idea is that if you want some elements on the page to take 100% of the height, all parent elements must have height = 100%, so in your case you need to set all HTML tags in the hierarchy to height: 100vh starting from the html and body. You don't have styles for the last two tags.

  3. By default, div has display: block styles and this kind of element will not adjust to height: 100%. What you need to do instead is to either use height: 100vh on all elements or make all elements display: flex and flex-grow: 1 to auto populate available area on the screen.

Upvotes: 1

Related Questions