1

サイドバーとテーブルを含むメインdivを備えた2列のレイアウトがあります。

サイドバーの幅は固定されており、メインdivの幅は柔軟である必要があります。これにより、常に画面の端まで伸びます。それを行うCSSの方法はありますか、それともJavaScriptを使用する必要がありますか？

HTML

<div id="content" data-role="content" role="main">
    <section>       
        ....
    </section>
    <div id="gridContainer">
        <table border="0" id="tblBrvGrid" class = "background" data-sort = "Name" data-asc_desc = "asc" data-filter = "">               
        <thead>
            <tr>
                <th></th>
                <th class="service sortable" data-field="Name" I18N="COLUMN_HEADER_SERVICE">
                    <span class="sort-asc"></span>
                </th>
                <th I18N="COLUMN_HEADER_STATUS"></th>
                <th I18N="COLUMN_HEADER_PERFORMANCE"></th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            ....
        </tbody>
    </table>
    <a id ="gridPaging" class="more-data-active" I18N="MORE_DATA" data-role="button" data-theme="g"></a>
    </div>
    <!-- end #gridContainer -->
</div>
<!-- end #content -->

CSS

section {
  float: left;
  width: 255px;
  border-right: 1px solid #DDDDDD;
}

#gridContainer {
  float: left;
  padding-left: 10px;
  min-width: 70%;
}

table {
  color: #222;
  width: 100%;
}

そして、ここにもっと手の込んだフィドルがあります：http: //jsfiddle.net/RmQR6/

4

1 に答える 1

2

私が正しく理解しているなら、それはあなたが望むhttp://jsfiddle.net/RmQR6/1/かもしれません。このように書いてください：

#gridContainer {
  padding-left: 10px;
  overflow:hidden;
}
于 2012-09-04T07:36:22.547 に答える