CSS：当我将它的高度设置为100％时，我的侧栏溢出了容器div的边框

当我将其高度设置为100％时，我的侧栏溢出了容器div的边框，我想知道是否有任何方法可以有它的高度100％减去一些像素。CSS：当我将它的高度设置为100％时，我的侧栏溢出了容器div的边框

这里是源：

<div id="main"> 
    <br /><br /> 
    <div class="content"> 
     <div id="sidecontent"> 
      <h1 id="title">Title</h1> 
      ***** 
     </div> 
     <div id="sidebar"> 
      <div class="sidebox"> 
       **** 
      </div> 
     </div> 
    </div> 
    <div class="bottom"></div> 
</div> 


#main { 
     position: relative; 
    background:transparent url('/public/images/main_bg.png') top left repeat-y; 
    padding:37px 37px 37px 37px; 
    margin-left: auto ; 
    margin-right: auto ; 
    width:940px; 
    min-height: 363px; 
     } 
     #main div.top, #main div.bottom { 
     height:70px; 
     width:1015px; 
     position: absolute; 
     left:0px; 
     } 

     #main div.content { 
     padding:0 15px 0 15px; 
     } 

     #sidecontent { 
     width: 675px; 
     } 

     #sidebar { 
       background: #fff url('/public/images/bg_side.png') top right repeat-y; 
     position: absolute; 
     height: 100%; 
       right:34px; 
       top:42px; 
     width: 200px; 
     padding: 10px 10px 0px 40px; 
       z-index:50; 
     } 

     .created_at { 
     color:gray; 
     }  

     .sidebox { 
     margin-bottom: 5px; 
     } 

    #main div.top { 
     top:-70px; 
     background: transparent url(/public/images/main_top.png) bottom no-repeat; 
     } 

    #main div.bottom { 
     bottom:-70px; 
     background: transparent url(/public/images/main_bottom.png) top no-repeat; 
     }

来源

2010-04-28 Roch

无法使用* both *百分比和像素在CSS中设置任何尺寸。 – 2010-04-28 10:57:42

试试看看这个article，看看你能否遵循这一点。它描述了如何使用CSS技术使两列具有相同的高度。

来源

2010-04-28 11:04:17 Jon

应设置就可以了保证金，或者您也可以用它填充周围DIV，如果它是一个专区内。在div容器内

例子：周围的div容器一个div内

margin-bottom: 5px;

例子：

padding-bottom: 5px;

而且，你甚至可以把一个div权后，在HTML来推一些，使用margin-top。

对不起，您能否更好地解释一下您想要做的事情？

也许试试这个：

<head> 
<style type="text/css"> 
#main { 
     position: relative; 
    background:transparent url('/public/images/main_bg.png') top left repeat-y; 
    padding:37px 37px 37px 37px; 
    margin-left: auto ; 
    margin-right: auto ; 
    width:940px; 
    min-height: 363px; 
     } 
     #main div.top, #main div.bottom { 
     height:70px; 
     width:1015px; 
     position: absolute; 
     left:0px; 
     } 

     #main div.content { 
     padding:0 15px 0 15px; 
     } 

     #sidecontent { 
     width: 675px; 
     } 

     #sidebar { 
       background: #fff url('/public/images/bg_side.png') top right repeat-y; 
     position: absolute; 
     height: 100%; 
       right:34px; 
       top:42px; 
     width: 200px; 
     padding: 10px 10px 0px 40px; 
       z-index:50; 
     } 

     .created_at { 
     color:gray; 
     }  

     .sidebox { 
     margin-bottom: 5px; 
     } 

    #main div.top { 
     top:-70px; 
     background: transparent url(/public/images/main_top.png) bottom no-repeat; 
     } 

    #main div.bottom { 
     background: transparent url(/public/images/main_bottom.png) top no-repeat; 
     } 
</style> 

</head> 

<body> 
<div id="main"> 
    <br /><br /> 
    <div class="content"> 
     <div id="sidecontent"> 
      <h1 id="title">Title</h1> 
      ***** 
     </div> 
     <div id="sidebar"> 
      <div class="sidebox"> 
       Here is some content in the sidebox class div.... 
      </div> 
     </div> 
    </div> 
    <div class="bottom"></div> 
</div> 
</body>

只是删除了底：从#main div.bottom CSS规则。

来源

2010-04-28 11:01:50 SoLoGHoST

CSS：当我将它的高度设置为100％时，我的侧栏溢出了容器div的边框

回答

相关问题