html - 父灰色 div 隐藏了石灰框的底部

Question

父灰色 div隐藏了石灰框的底部。

我可以保持石灰盒的底部可见吗？
使用溢出的正确方法是什么：隐藏；这里？

保存父灰色框的 100% 宽度也很重要。

我们怎样才能使灰线 100% 宽度（放大和缩小）？

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<style>
/* Start BG RECT */
.bg-rect {
    position: absolute; 
    top: 50px;
    left:0; right:0;    /* Required to be 100% 100% */
    min-width: 980px;   /* max for iPad */  
    height: 263px;
}

#bg-rect-important {
    overflow: hidden;   /* Disable right bg breaking by words on the right! */
    /* overflow hidden: disallows child be taller then parent?! */
    background-color: #656565;
}

/* Start BASE RECT */
.base-rect {
    position: relative; /* margin: auto works only with position: relative  */ 
    margin: 0 auto;     /* Centralize! */
/*!SPACE>*/top:32px; width:940px;
    /*left: -300px; /* unfortunately scroll doen't work */
}

#base-rect-lime {
    background-color: #3F3;
    height:249px;
}

    /* Start LIME RECT : left, right */
    #left-text {
        position:absolute;
        left:-200px; 
        width:200px; height:218px;
    }
    #right-text {
        position:absolute;
        right:-200px;
        width:200px; height:218px;
    }
    /* End LIME RECT : left, right */

/* End BASE RECT */
/* End BG RECT */
</style>

</head>

<body>

<div class="bg-rect" id="bg-rect-important">
    <div class="base-rect" id="base-rect-lime">
        <div id="left-text"></div>       
        <div id="right-text"></div>
    </div>
</div>

</body>
</html>

score 0 · Accepted Answer

我们认为，

#bg-rect-important {
background-color: #656565;
}

将使您的石灰盒的底部可见

它还节省了父灰盒的 100% 宽度

希望这对您有所帮助。

score 0 · Accepted Answer

我很确定这就是你想要的：

#bg-rect-important {
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #656565;
    width: 100%;
}

在这里小提琴 - http://jsfiddle.net/h2E7v/

html - 父灰色 div 隐藏了石灰框的底部

2 回答 2

Related

Reference