Auto expanding side column_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-04-12 02:58 出处：网络

相关专题：css xhtml

I am building a webpage and it has a div tag called content which has a CSS property of min-height: 200px; I want to put in another div开发者_运维百科 tag with a height of 100%, however, this does not work. I want it to automatically grow so that it looks nice when content gets larger. However I am unsure how to do this.

Any help is appreciated, but I want it to be XHTML strict and CSS3 compatible.

Trying to do something like this:

Auto expanding side column

-They gray side bar, is what I wanted to do, it was added in paint, the rest I have already done with CSS3.

I understood the issue with height: 100% Here is how I would do it using only css:

here it is:

<html>

<head>
<style type="text/css">
    body{
        background-color: #cbf;
    }

    #wrap {
        border-radius: 20px;
        margin: 10px auto;
        overflow: hidden;
        width: 900px;
    }

    #head {
        text-align: center;
        background-color: red;
        height: 100px;
        overflow: hidden;
    }

    #main {
        float: left;
        background-color: gray;
        min-height: 200px;
    }

    #sidebar {
        width:200px;
        float: left;
        background-color: gray;
    }

    #content {
        float:left;
        background-color: white;
        min-height: 200px;
        width: 700px;
    }

</style>
<title>
    example
</title>
</head> 

<body>
<div id="wrap">
    <div id="head">
        <h1>example site name</h1>
    </div>
    <div id="main">
        <div id="sidebar">
            &nbsp;
        </div>
        <div id="content">
            &nbsp;
            <p>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>
                ***</br></br></br>

            </p>
        </div>
    </div>
</div>
</body>
</html>

You can also alternatively create the sidebar with

        #wrap {
            background: url('bg.png') repeat-y white;
        }

bg.png needs to be a 1 pixel high image that has the same width as the siderbar. using css height 100% will not work in this case.

Hope this helps.

Auto expanding side column

精彩评论

关注公众号

热门标签

图文推荐

Auto expanding side column

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：