Question

*{
    font-family: arial;
}
body{
    margin: 0;
    width: 100%;
    height: 100%;
}
.nav{
    background-color: maroon;
    width: 14%;
    height: 100%;
    float: left;
    
}
.body{
    background-color: cadetblue;
    width: 66%;
    height: 100%;
    
}
.login{
    background-color: maroon;
    width: 20%;
    height: 100%;
    float: right;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="csspart.css">
    </head>
    <body>
        <div class="nav">nav</div>
        <div class="body">body</div>
        <div class="login">login</div>
    </body>
</html>

我有一个问题，将100％高度和导航栏浮动到左边，100％注册div到右边和它们之间的身体。我尝试了一些位置，但我相信缺少定位的东西。希望有人知道我错过了什么。

Answer 1

在所有3个div上使用float: left并更改此规则

html, body {
  margin: 0;
  height: 100%;
}

示例代码段

＆＃13;

*{
  font-family: arial;
}
html, body {
  margin: 0;
  height: 100%;
}
.nav{
  background-color: maroon;
  width: 14%;
  height: 100%;
  float: left;

}
.body{
  background-color: cadetblue;
  width: 66%;
  height: 100%;
  float:left;

}
.login{
  background-color: maroon;
  width: 20%;
  height: 100%;
  float:left;
}

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="csspart.css">
  </head>
    <body>
    
        <div class="nav"></div>
        <div class="body"></div>
        <div class="login"></div>
    
    </body>


</html>

＆＃13;

如果你想添加例如页脚，请使用包装器，这样做，以及清除浮动

＆＃13;

*{
  font-family: arial;
}
html, body {
  margin: 0;
  height: 100%;
}
.wrap{
  height: 100%;
}
.wrap:after{
  content: ' ';
  display: table;
  clear: both;
}
.nav{
  background-color: maroon;
  width: 14%;
  height: 100%;
  float: left;
  word-break: break-word;
  padding: 10px;
  box-sizing: border-box;        /* when use padding/border this is needed or else the     */
}                                /* width has to be changed to keep its total size of 14%  */
.body{
  background-color: cadetblue;
  width: 66%;
  height: 100%;
  float:left;

}
.login{
  background-color: maroon;
  width: 20%;
  height: 100%;
  float:left;
}
.footer{
  background-color: green;
  height: 50px;
}

＆＃13;

<div class="wrap">
  <div class="nav">Blablablablablabla bla bla bla bla bla bla bla bla bla bla bla </div>
  <div class="body"></div>
  <div class="login"></div>
</div>
<div class="footer"></div>

＆＃13;

现在，对于超出视口的相同列大小，float不再是一个好选择，flex是，所以这是一个更实用的解决方案。

＆＃13;

*{
  font-family: arial;
}
html, body {
  margin: 0;
  height: 100%;
}
.wrap{
  min-height: 100%;
  display: flex;
}
.nav{
  background-color: maroon;
  width: 14%;
  word-break: break-word;
  padding: 10px;
  box-sizing: border-box;        /* when use padding/border this is needed or else the     */
}                                /* width has to be changed to keep its total size of 14%  */
.body{
  background-color: cadetblue;
  width: 66%;
}
.login{
  background-color: maroon;
  width: 20%;
}
.footer{
  background-color: green;
  height: 50px;
}

＆＃13;

<div class="wrap">
  <div class="nav">Blablablablablabla bla bla bla bla bla bla bla bla bla bla bla </div>
  <div class="body">
 Content <br> 
 Content <br> 
 Content <br> 
 Content <br> 
 Content <br> 
 Content <br> 
 Content <br> 
 Content <br> 
 Content <br> 
 Content <br> 
 Content <br> 
 Content <br> 
 Content <br> 
 Content <br> 
 Content <br> 
 Content <br> 
 Content <br> 
 Content <br> 
 Content <br> 
 Content <br> 
 Content <br> 
 Content <br> 
 Content <br> 
 Content <br> 
 Content <br> 
 Content last<br> 
    
  </div>
  <div class="login"></div>
</div>
<div class="footer"></div>

＆＃13;

如果您无法使用flex，请使用display: table

＆＃13;

*{
  font-family: arial;
}
html, body {
  margin: 0;
  height: 100%;
}
.wrap{
  min-height: 100%;
  width: 100%;
  display: table;
}
.nav{
  display: table-cell;
  background-color: maroon;
  width: 14%;
  word-break: break-word;
  padding: 10px;
  box-sizing: border-box;        /* when use padding/border this is needed or else the     */
}                                /* width has to be changed to keep its total size of 14%  */
.body{
  display: table-cell;
  background-color: cadetblue;
  width: 66%;
}
.login{
  display: table-cell;
  background-color: maroon;
  width: 20%;
}
.footer{
  background-color: green;
  height: 50px;
}

＆＃13;

<div class="wrap">
  <div class="nav">Blablablablablabla bla bla bla bla bla bla bla bla bla bla bla </div>
  <div class="body">
 Content <br> 
 Content <br> 
 Content <br> 
 Content <br> 
 Content <br> 
 Content <br> 
 Content <br> 
 Content <br> 
 Content <br> 
 Content <br> 
 Content <br> 
 Content <br> 
 Content <br> 
 Content <br> 
 Content <br> 
 Content <br> 
 Content <br> 
 Content <br> 
 Content <br> 
 Content <br> 
 Content <br> 
 Content <br> 
 Content <br> 
 Content <br> 
 Content <br> 
 Content last<br> 
    
  </div>
  <div class="login"></div>
</div>
<div class="footer"></div>

＆＃13;

不能把每个人都包起来的东西

1 个答案: