Question

divs宽度总和应为100vw。相反，由于100vh滚动条，它们将一个包裹在另一个之下。如果我删除第二个div（主要），滚动条将消失。毕竟产生问题的宽度或高度是什么？

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
}

html, body {
  min-height: 100vh;
}

nav {
  background-color: blue;
  float: left;
  width: 20vw;
  height: 100vh;
  min-height: 100vh;
}

main {
  background-color: yellow;
  display: inline-block;
  width: 80vw;
  height: 100vh;
}

<nav></nav>
<main></main>

Answer 1

I suggest to use percentage values and make both items float: left and display: block to avoid the whitespace which is generated when using inline-blocks

html, body {
    	margin:0;
    	padding:0;
    	min-height: 100vh;
    	}
    	
    
    * {
    	box-sizing:border-box;
    	margin:0;
    	padding:0;
    	border:0;
    }
    
    nav {
    	background-color: blue;
    	display:block;
        float: left;
        width: 20%;
    	height: 100vh;
    	min-height:100vh;
    }
    
    main {
    	background-color: yellow;
    	display:block;
        float: left;
    	width: 80%;
    	height: 100vh;
    }

<nav></nav>
<main>

</main>

https://jsfiddle.net/xu9b9o2n/1/

The even easier way would be to make the container (body in this case) a flex container (dsplay: flex), but that depends on how much you have to consider compatibility to old browsers:

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  display: flex;
}

nav {
  background-color: blue;
  width: 20%;
  height: 100vh;
  min-height: 100vh;
}

main {
  background-color: yellow;
  width: 80%;
  height: 100vh;
}

<nav></nav>
<main>

</main>

Answer 2

你应该使用浮点方法或内联块方法，而不是混合它们，这将是浮点方法..

https://jsfiddle.net/RACCH/my0ee61r/

nav {
    background-color: blue;
    float:left;
    width: 20vw;
    height: 100vh;
}

main {
    background-color: yellow;
    float:left;
    width: 80vw;
    height: 100vh;
}

如果使用display inline-block方法，请考虑gap problem ..

如果您使用vw单位将不考虑滚动条宽度，这就是为什么您的第二个元素将转到新行，以避免使用％百分比单位..

Answer 3

您可以使用“位置：绝对，相对，粘性，固定......”来处理div的位置。 https://www.w3schools.com/css/css_positioning.asp

html, body {
            margin:0;
            padding:0;
            min-height: 100vh;
        }


        * {
            box-sizing:border-box;
            margin:0;
            padding:0;
            border:0;
        }

        nav {
            background-color: blue;
            float:left;
            width: 20vw;
            height: 100vh;
            min-height:100vh;
        }

        main {
            background-color: yellow;
            display:inline-block;
            width: 80vw;
            height: 100vh;
            
        /*just add (position: absolute)*/
            position: absolute;     
        }

<html>
<head></head>
<body>
    <nav></nav>
      <main></main>
</body>
</html>

宽度总和为100vw的浮动div将彼此包裹（删除所有边距）

3 个答案: