Question

我已经花了好几个小时来解决这个错误，但似乎没有任何作用

以下是代码，有人可以帮助我：

CSS：

#allContents{
    position:relative;

    width:980px;
    height:100%;
    min-height:850px;
    margin:0;
    padding:0;
}

#allContents tr{
    height:100%;
}

#sidebar{
    float:left;

    width:225px;
    min-height:850px;
    padding:10px;
    padding-top:0px;

    text-align:center;

    background-color:#D8D8D8;
}

#sidebar .searchfield {
    width: 162px;
    padding: 6px 6px 6px 8px;

    text-align:right;

    border: 1px solid #bcbbbb;
    border-radius: 2em;
    outline: medium none;
    background: none repeat scroll 0 0 #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) inset;
}

#sidebar .searchbutton {width: 27px;
    height: 27px;

    color: #fff;
    border: 1px solid #494949;
    border-radius: 2em;
    background: -moz-linear-gradient(center top , #9e9e9e, #454545) repeat scroll 0 0 rgba(0, 0, 0, 0);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);

    font-size: 15px;
    font-weight: bold;
}

#sidebar .searchform {
    display: inline-block;

    margin-top:20px;padding: 3px 5px;

    border: 1px solid #d2d2d2;
    border-radius: 2em;
    background: -moz-linear-gradient(center top , #fff, #ededed) repeat scroll 0 0 rgba(0, 0, 0, 0);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}

#sidebar .h-Line {
    margin:20px 0px 20px 0px;
}

#sidebar .Social li{
    display: block;
    float: left;

    width: 30%;
    margin: 0;
    margin-top:30px;
    padding: 10px;

    text-align:center;
}

#sidebar .mainTitle{
    text-align:center;

    color:#555;

    font-size:16px;
}

#content{
    width:755px;
    min-height:850px;
    padding:20px;
    padding-top:0px;

    background-color:#EAE9E9;
}

#content #inside{
    float:right;

    padding:20px;

    text-align:right;
}

#content #inside h1{
    color:red;

    font-size:20px;
}

#content #inside h3{
    color:grey;

    font-size:16px;
}
#content #inside h2{
    color:black;

    font-size:18px;
}

和html

<html style="margin:0 auto;padding:0">
    <head>
         <title>khaldoun</title>
         <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
         <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    </head>
    <body>
        <div id="innerBody" >
            <table>
                <tr>
                    <td style="float:left;">
                        <?php include ('sidebar.php');?><!--Let's say that this one has 3 lines of text-->
                    </td>
                    <td style="float:right">
                        <?php include ('videoPageContainer.php');?> <!--Let's say that this one has 100 lines of text-->
                    </td>
                </tr>
            </table>
        </div>
    </body>
</html>

的sidebar.php

<div id="sidebar" style="float:left">
    <br>
    <form class="searchform">
        <input class="searchfield" type="text" onfocus="this.placeholder = ''" onblur="this.placeholder = 'search for'" placeholder="search for">
        <button class="searchbutton" type="button"><i class='fa fa-search'></i></button>
    </form>
    <ul class="Social">
        <a href="http://youtube.com" target="_blank"><li><img src="wp-content/themes/khaldountheme/images/youtube.png"></li></a>
        <a href="http://twitter.com" target="_blank"><li><img src="wp-content/themes/khaldountheme/images/twitter.png"></li></a>
        <a href="http://facebook.com" target="_blank"><li><img src="wp-content/themes/khaldountheme/images/facebook.png"></li></a>
    </ul>
    <img src="wp-content/themes/khaldountheme/images/h-line.png" class="h-Line">
    <div class="mainTitle">last posts</div>

</div>

和videoPageContainer.php

<div id="content">
    <div id=inside>
                     <br>s<br><br><br>
                     <br>s<br><br><br>
                     <br>s<br><br><br>
                     <br>s<br><br><br>
                     <br>s<br><br><br>
                     <br>s<br><br><br>
                     <br>ddddddd<br><br><br>
                     <br>ddddddddd<br><br><br>
                     <br>ddddddd<br><br><br>
                     <br>ddd<br><br><br>
                     <br>ddd<br><br><br>
                     <br>ddd<br><br><br>
                     <br>s<br><br><br>
                     <br>s<br><br><br>
                     <br>s<br><br><br>
                     <br>s<br><br><br>
                     <br>s<br><br><br>
                     <br>s<br><br><br>
                     <br>s<br><br><br>
                     <br>s<br><br><br>
                     <br>s<br><br><br>
                     <br>s<br><br><br>
                     <br>s<br><br><br>
                     <br>s<br><br><br>
</div>
</div>

每次内容超过最小高度时，添加的内容浮动在空中，甚至bgcolor都不在其后面，并且两个div（容器和侧边栏）的高度保持固定;任何关于如何使它们变得灵活并且共同扩展的想法？

Answer 1

您可以根据其父td

的高度，使用此javascript代码设置tr的最小高度

此代码将表行td:first-child min-height设置为父表行tr的高度。

jQuery('table tr td:first-child').each(function(){
    jQuery(this).css({
        height: jQuery(this).closest('tr').css('height')
    })
});

当内容超过最小高度时，固定内容侧栏的高度

1 个答案: