我不能将div的大小设为100%

时间:2015-06-06 14:43:35

标签: html css

http://hyp.altervista.org/index.html

我的css有问题。

    .sfondobianco{
        background-color:#ffffff;
        z-index: 4;
        position:absolute;
        padding-top: 0px;
        padding-left: 0px;
        padding-right: 0px;
        padding-bottom: 0px;

        }

    .menusinistra{

        background-color:#f6f7f8;
        padding-top: 0px;
        padding-left: 0px;
        margin-bottom:0px;
        width:25%;
        border:0px;
        left:0px;
        font-family:fantasy;  

        float: left;
        border-right:2px solid #757575;
        }

    .contenitoredestra{

        float: left;

        width: 75%;    
        background-color: bisque;
        }

    .contenitore{
        padding-top: 0px;
        padding-left: 0px;
        margin-bottom:0px;
        padding-left: 20px;
        padding-top: 20px;
        padding-right: 20px;
        width: 100%;
        display: inline-block;
        vertical-align: bottom;   
        } 

我希望contenitoredestramenusinistra覆盖100%的网页长度。我做不到,我不知道为什么。也许是上层div的问题。

此外,我希望menusinistra高度取决于contenitoredestra长度而不包含表格和表格单元格。你能帮助我吗?

HTML部分:

    <div class="sfondobianco">
        <div class="menusinistra">
            <div id="fb-root"></div>
            <div class="fb-page" data-href="https://www.facebook.com/pages/Big-GYM/1567454133517054"
                data-width="500px" height="600px" data-hide-cover="false" data-show-facepile="true" data-show-posts="true">
                <div class="fb-xfbml-parse-ignore">
                    <blockquote cite="https://www.facebook.com/pages/Big-GYM/1567454133517054"><a href="https://www.facebook.com/pages/Big-GYM/1567454133517054">Big GYM</a></blockquote>
                </div>
            </div>
        </div>
        <div class="contenitoredestra">

        <div class="banner"> <img src="images/save.png" style="max-width:100%;height:auto;"> </div>

        <div class="container marketing contenitore">
            ooooooooooooooooooo
        </div>
        <!-- /.container --> 
        </div>
    </div>

1 个答案:

答案 0 :(得分:1)

如果我正确理解了这个问题,只需将display: flex;添加到.sfondobianco即可。即:

.sfondobianco{
   background-color:#ffffff;
   z-index: 4;
   position:absolute;
   padding-top: 0px;
   padding-left: 0px;
   padding-right: 0px;
   padding-bottom: 0px;
}

变为:

.sfondobianco{
   background-color:#ffffff;
   z-index: 4;
   position:absolute;

   display:flex;
}

还删除了填充,因为它是多余的。