logo标签列表

CSS样式设置div标签高度

htmlcss
3
我正在设置所有的 div 标签的高度，单位是像素。我遇到了一些问题，我认为如果我使用百分比来设置高度，它将会有所帮助。百分比对于 width 是有效的，但不幸的是，我不能使用百分比来设置 div 的高度。
以下是我的 CSS，我想用百分比替换像素高度。 

 .header{
      width:100%;
      height:100px;
      background: rgb(226,226,226); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(226,226,226,1) 0%, rgba(201,201,201,1) 37%, rgba(229,229,229,1) 65%, rgba(209,209,209,1) 78%, rgba(209,209,209,1) 78%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(226,226,226,1)), color-stop(37%,rgba(201,201,201,1)), color-stop(65%,rgba(229,229,229,1)), color-stop(78%,rgba(209,209,209,1)), color-stop(78%,rgba(209,209,209,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(226,226,226,1) 0%,rgba(201,201,201,1) 37%,rgba(229,229,229,1) 65%,rgba(209,209,209,1) 78%,rgba(209,209,209,1) 78%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(226,226,226,1) 0%,rgba(201,201,201,1) 37%,rgba(229,229,229,1) 65%,rgba(209,209,209,1) 78%,rgba(209,209,209,1) 78%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(226,226,226,1) 0%,rgba(201,201,201,1) 37%,rgba(229,229,229,1) 65%,rgba(209,209,209,1) 78%,rgba(209,209,209,1) 78%); /* IE10+ */
background: linear-gradient(to right,  rgba(226,226,226,1) 0%,rgba(201,201,201,1) 37%,rgba(229,229,229,1) 65%,rgba(209,209,209,1) 78%,rgba(209,209,209,1) 78%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#d1d1d1',GradientType=1 ); /* IE6-9 */

     }
    .logo{
 
  margin: 0px 0;
  padding: 15px 0px 0px 130px;
    cursor: pointer;
    float:left;
}

.heading{
      float: left;
      margin-top: 0px;
      margin-left: 6px;
      height: 50px;
      width: 75%;
      background-color: #D1D0CE;
      text-align:center;

    }
     body{
     
 margin:0;
 padding:0;
 width:100%;
 
 font:normal 12px/1.5em "Liberation sans", Arial, Helvetica, sans-serif;
 
overflow-x: hidden;

    background-image:url('image/silver.jpg');
    background-repeat:no-repeat;
    background-size:cover;
}
.footer{
   width:100%;
      height:50px;
        background: rgb(226,226,226); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(226,226,226,1) 0%, rgba(201,201,201,1) 37%, rgba(229,229,229,1) 65%, rgba(209,209,209,1) 78%, rgba(209,209,209,1) 78%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(226,226,226,1)), color-stop(37%,rgba(201,201,201,1)), color-stop(65%,rgba(229,229,229,1)), color-stop(78%,rgba(209,209,209,1)), color-stop(78%,rgba(209,209,209,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(226,226,226,1) 0%,rgba(201,201,201,1) 37%,rgba(229,229,229,1) 65%,rgba(209,209,209,1) 78%,rgba(209,209,209,1) 78%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(226,226,226,1) 0%,rgba(201,201,201,1) 37%,rgba(229,229,229,1) 65%,rgba(209,209,209,1) 78%,rgba(209,209,209,1) 78%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(226,226,226,1) 0%,rgba(201,201,201,1) 37%,rgba(229,229,229,1) 65%,rgba(209,209,209,1) 78%,rgba(209,209,209,1) 78%); /* IE10+ */
background: linear-gradient(to right,  rgba(226,226,226,1) 0%,rgba(201,201,201,1) 37%,rgba(229,229,229,1) 65%,rgba(209,209,209,1) 78%,rgba(209,209,209,1) 78%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#d1d1d1',GradientType=1 ); /* IE6-9 */

}
h1{
display:inline-block; 
}
.outer {
  margin-left: 20%;
  margin-top: 3%;
  margin-bottom: 3%;
  height: 737px;
  width: 60%;
  box-shadow: 10px 10px 5px #888888;
  border: 1px solid #f9f2f2;
  border-radius: 10px;
  
}
button.logout{
float:right;
margin-right:10px;


}
.log {
 width:60%;
  height: 10%;
  position: absolute;
  border: 1px solid #f9f2f2;
  border-radius: 10px;
  background: -o-linear-gradient(bottom, #e5e3e3 5%, #ffffff 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e5e3e3), color-stop(1, #ffffff));
  background: -moz-linear-gradient(center top, #e5e3e3 5%, #ffffff 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#e5e3e3", endColorstr="#ffffff");
  background: -o-linear-gradient(top, #e5e3e3, ffffff);
  background-color: #e5e3e3;
  border: 0px solid #f9f2f2;
  text-align: center;
  line-height:20px;
  border-width: 0px 0px 1px 1px;
}
.rest {
  height: 685px;
  background: -o-linear-gradient(bottom, #e5e3e3 5%, #ffffff 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e5e3e3), color-stop(1, #ffffff));
  background: -moz-linear-gradient(center top, #e5e3e3 5%, #ffffff 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#e5e3e3", endColorstr="#ffffff");
  background: -o-linear-gradient(top, #e5e3e3, ffffff);
  background-color: #e5e3e3;
  border: 1px solid #f9f2f2;
  border-width: 0px 0px 0px 0px;
  border-radius: 0px 0px 10px 10px;
  text-align: left;
  padding: 0px 7px;
}
.sidemenu {
  float: left;
  margin-top: 150px;
 
  width: 100%;
  
}
.content {
  border-left: thick solid #f9f2f2;
}
.side{
  width: 24%;
  float: left;
  display: inline-block;
}
 

  hr {
      margin: 0;
      width: 1px;
      height: 660px;
      border: 0;
      background: #fff;
      float: left;
    }
.astext {
    background:none;
    border:none;
    margin:0;
    padding:0;
    cursor:pointer;
    color:#000000;
    line-height:35px;
    font-family:arial;
 font-size:13px;
 font-weight:bold;
}
a.astext:link,a.astext:visited {
    color:black;
    background-color:transparent;
    text-decoration:none;
}

a.astext:hover,a.astext:active {
    color:black;
    background-color:transparent;
    text-decoration:none;
}
.menu{
  height: 45px;
 
  text-align:left;
  margin-left:2px;
  
  background: -o-linear-gradient(bottom, #e5e3e3 5%, #ffffff 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e5e3e3), color-stop(1, #ffffff));
  background: -moz-linear-gradient(center top, #e5e3e3 5%, #ffffff 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#e5e3e3", endColorstr="#ffffff");
  background: -o-linear-gradient(top, #e5e3e3, ffffff);
  background-color: #e5e3e3;
  border: 1px solid #f9f2f2;
  border-width: 0px 0px 0px 0px;
  border-radius: 0px 0px 10px 10px;
  text-align: left;
  padding: 0px 7px;
}
.menu:hover{
   background: -o-linear-gradient(top, #e5e3e3 5%, #ffffff 100%);
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0.05, #e5e3e3), color-stop(1, #ffffff));
  background: -moz-linear-gradient(center bottom, #e5e3e3 5%, #ffffff 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#e5e3e3", endColorstr="#ffffff");
  background: -o-linear-gradient(bottom, #e5e3e3, ffffff);
  background-color: #e5e3e3;
  border: 1px solid #f9f2f2;
  border-width: 0px 0px 0px 0px;
  border-radius: 0px 0px 10px 10px;
  text-align: left;
  padding: 0px 7px;
}
 <body>
      <div class="main">     
          <div class="header">
              <img src="image/DZB.png" class="logo" style="width:110px;height:70px" alt="logo"/>
          </div>    <!--End of header div-->
          <div class="outer">
                <div class="log">
                <h1>Profile</h1>
                       <form method="post"> <button class="logout" name="logout" >Logout</button></form>
                       
                </div> <!--End of log div -->
                <div class="rest">
                  <div class="side">
                   <div class="sidemenu">
                        <div class="1 menu">
                          <a href="admin_dashboard.php" class="astext">Profile</a>
                        </div> <!--End of menu1 -->
                        <div class="2 menu">
                          <a href="clients.php" class="astext">Clients</a>
                        </div> <!--End of menu 2-->
                        <div class="3 menu">
                          <a href="employees.php" class="astext">Employees</a>
                        </div> <!--End of menu 3-->
                        <div class="menu 4">
                        <a href="admin_file_view.php" class="astext">Documents</a>
                        </div> <!--End of menu 4-->
                   </div> <!--End of side menu -->
                   </div>  <!--End of side div -->
                   <hr>
                    <!--  <div class="heading" >
                         <h1>Profile</h1>
                      </div>    End of heading div -->
                   <div class="content">
              </div> <!--End of content -->
                </div> <!--End of rest div -->
          </div> <!--End of outer div-->
          
          <div class="footer">
             
          </div>
      </div> <!--End of main div-->
 </body>

有人可以解释一下@Ibrahim和使用absolute.position:absolute/relative之间的区别吗？我感到困惑。 - user3386779
2个回答
1

试试这个

.sidemenu 
{
  left: 0px;
  margin-top: 150px;
  position: absolute;
  height: 25%;
  width: 30%;

}

<div class="sidemenu">
  <div class="1 menu">
    <a href="admin_dashboard.php" class="astext">Profile</a>
  </div>
  <div class="2 menu">
    <a href="clients.php" class="astext">Clients</a>
  </div>
  <div class="3 menu">
    <a href="employees.php" class="astext">Employees</a>
  </div>
  <div class="menu 4">
  <a href="admin_file_view.php" class="astext">Documents</a>
  </div>
</div>
1
也许这种方式不可行。如果你用百分比固定了任何一个 div 的高度，你就必须固定其父级 div 的高度。以下是一个示例…

CSS--

.parent_div{
      height:500px;
      position:relative;
}
.chield_div{
      height:50%;
      position:relative;
}
请给我JSFiddle的URL。 - Sarower Jahan
这看起来很不错。但是如果我在内容标签中添加一些内容，一切都会混乱..我不知道该怎么办。 - user3386779
1
请访问此演示 https://jsfiddle.net/sarowerj/sducgj46/。也许您想要类似的东西。 - Sarower Jahan
让我们在聊天中继续这个讨论。点击此处进入聊天室。 - user3386779
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接