Question

在我的HTML中，我有点喜欢这个

<div id="content">
    <div id="wrapper">
        <div id="steps">
            <form id="formElem" name="formElem" action="" method="post">
                <fieldset class="step">
                    <legend>General Information </legend>
                </fieldset>
                <fieldset class="step">
                    <legend>Medical History</legend>
                </fieldset>
            </form>
        </div>
        <div id="navigation" style="display:none;">
            <ul>
                <li class="selected">
                    <a href="#">General Information</a>
                </li>
                <li>
                    <a href="#">Medical History</a>
                </li>
        </div>
    </div>

我的css文件是这个

#content{
    margin:30px auto;
    text-align:center;
    width:900px;
    position: relative;
    height:100%;
}



#left{
    position: absolute;
    z-index: 1;
    margin-top:10px;
    margin-left:30px;
    text-align:center;
    width:170px;
    color:#000000;
    height:500px;
    -moz-box-shadow:0px 0px 13px #aaa;
    -webkit-box-shadow:0px 0px 13px #aaa;
    box-shadow:0px 0px 23px #aaa;
    background-color:rgba(300,250,250,0.5);
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}


#wrapper{
    -moz-box-shadow:0px 0px 13px #aaa;
    -webkit-box-shadow:0px 0px 13px #aaa;
    box-shadow:0px 0px 23px #aaa;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    border:2px solid #fff;
    //background-color:#f9f9f9;
    background-color:rgba(220,220,220,0.5);
    width:1000px;
    height:100%;
    overflow:hidden;
}

#steps{
    width:1000px;
    height:520px;

     overflow: auto; 

    /* overflow: scroll;
    overflow:  */
}
.step{
    float:left;
    width:1000px;
    /* height:600px;  */
    overflow-y: auto;
    /* overflow:-moz-scrollbars-vertical; */

    /*height:320px;*/
}
#navigation{
    height:40px;
    background-color:#e9e9e9;
    border-top:1px solid #fff;
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-bottom-left-radius:10px;
    -webkit-border-bottom-right-radius:10px;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
}
#navigation ul{
    list-style:none;
    float:left;
    margin-left:10px;
}
#navigation ul li{
    float:left;
    border-right:1px solid #ccc;
    border-left:1px solid #ccc;
    position:relative;
    margin:0px 2px;
}
#navigation ul li a{
    font-size: 10px;
    display:block;
    height:40px;
    background-color:#444;
    color:#777;
    outline:none;
    font-weight:bold;
    text-decoration:none;
    line-height:40px;
    width: auto;
    padding:0px 5px;
    border-right:1px solid #fff;
    border-left:1px solid #fff;
    background:#f0f0f0;
    background:
        -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.09, rgb(240,240,240)),
        color-stop(0.55, rgb(227,227,227)),
        color-stop(0.78, rgb(240,240,240))
        );
    background:
        -moz-linear-gradient(
        center bottom,
        rgb(240,240,240) 9%,
        rgb(227,227,227) 55%,
        rgb(240,240,240) 78%
        )
}

我想根据其中存在的字段长度调整每个字段集的高度。我怎样才能做到这一点？

Answer 1

字段集自动调整高度以包含其中包含的表单元素。不需要额外的CSS。

字段集显然必须包含表单字段;不是100％确定为什么你从示例代码中省略了它们。

CSS高度调整

1 个答案: