当内容很大时，侧栏仍然很小

时间：2017-06-20 09:30:27

标签： html css twitter-bootstrap

这是我的HTML我的问题是我的侧边栏没有填满全高。一段时间内容需要很长的空间，时间侧栏仍然很小。请给我一个解决方案

.hide {
  display: none;
}

.main {
  width: 1700px;
  margin: auto;
}

.body {
  width: 1700px;
  font-family: lato, Verdana, "Times New Roman", Calibri;
  font-size: medium;
  border: 1px solid dodgerblue;
}

.header {
  background-color: #f0f0f8;
  margin: 0 auto;
  height: 70px;
  border-radius: 20px 20px 0px 0px;
  text-align: left;
  padding: 0px 5px 0px 15px;
  border: 1px solid dodgerblue;
  color: dodgerblue;
}

.header h2 {
  margin-top: 9px;
  font-weight: bold;
  padding-top: 9px;
}

.side-bar {
  width: 200px;
  float: left;
  background-color: #2c3133;
  height: 100%;
}

ul.menu-list {
  padding-left: 0px;
}

ul.menu-list li {
  list-style: none;
}

ul.menu-list li a {
  color: #f5ebf4;
  display: block;
  padding: 12px;
  border-bottom: 1px solid #bbb6c0;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  -moz-transition: 0.2s;
  transition: 0.2s;
  text-decoration: none;
}

ul.menu-list li a:hover {
  background-color: dimgrey;
  padding-left: 15px;
}

ul.menu-list li a.selected {
  background-color: dimgrey;
}

.content {
  top: 0;
  background-color: #e8e8f0;
  height: 100%;
  margin-left: 200px;
  padding: 20px 20px 0px 20px;
}

.footer {
  background-color: #faf3ff;
  height: 60px;
  border-radius: 0px 0px 20px 20px;
  padding: 10px;
  border: 1px solid dodgerblue;
}

.footer-right {
  float: right;
  margin: auto;
}

.footer-left {
  float: left;
  padding-top: 8px;
}

.form {
  padding: 20px;
  border: 1px solid #bbb6c0;
  border-radius: 10px;
}

.table-responsive {
  overflow-x: hidden;
  overflow: auto;
  height: 100%;
  max-height: 800px;
}

.view {
  margin-bottom: 20px;
}

.main {
  min-height: 800px;
}

.body,
.side-bar,
.content {
  min-height: 730px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="main" class="main">
  <div id="header" class="header">
    <h2>Wp Magick</h2>
  </div>
  <div id="body" class="body">
    <div id="side-bar" class="side-bar">
      <div id="menu" class="menu">
        <ul class="menu-list">
          <li><a id="menu-add-category" class="selected">Add Category</a></li>
          <li><a id="menu-add-type" class="deselected">Add Type</a></li>
          <li><a id="menu-add-product" class="deselected">Add Product</a></li>
          <li><a id="menu-view-all" class="deselected">View</a></li>
        </ul>
      </div>
    </div>
    <div id="content" class="content">
      <div id="add-category" class="show">
        <div class="form">
          <div class="form-group form-group-lg">
            <form method="post" action="">
              <label>Add Category :</label><br>
              <input type="text" name="category" placeholder="category" class="form-control" /><br>
              <button type="submit" name="save-category" class="btn btn-default btn-lg">Save</button>
            </form>
          </div>
        </div><br>

        <div class="form view">
          <label>List of Categories</label>
          <div class="table-responsive">
            <table class="table table-hover">
              <tr>
                <th>Categories</th>
                <th>Update</th>
                <th>Delete</th>
              </tr>
              
                <tr>
                  <td>
                    Category1
                  </td>
                  <td>Edit</td>
                  <td>Delete</td>
                </tr>
<tr>
                  <td>
                    Category1
                  </td>
                  <td>Edit</td>
                  <td>Delete</td>
                </tr>
<tr>
                  <td>
                    Category1
                  </td>
                  <td>Edit</td>
                  <td>Delete</td>
                </tr>
<tr>
                  <td>
                    Category1
                  </td>
                  <td>Edit</td>
                  <td>Delete</td>
                </tr>
<tr>
                  <td>
                    Category1
                  </td>
                  <td>Edit</td>
                  <td>Delete</td>
                </tr>
<tr>
                  <td>
                    Category1
                  </td>
                  <td>Edit</td>
                  <td>Delete</td>
                </tr>
<tr>
                  <td>
                    Category1
                  </td>
                  <td>Edit</td>
                  <td>Delete</td>
                </tr>
<tr>
                  <td>
                    Category1
                  </td>
                  <td>Edit</td>
                  <td>Delete</td>
                </tr>
<tr>
                  <td>
                    Category1
                  </td>
                  <td>Edit</td>
                  <td>Delete</td>
                </tr>
<tr>
                  <td>
                    Category1
                  </td>
                  <td>Edit</td>
                  <td>Delete</td>
                </tr>
<tr>
                  <td>
                    Category1
                  </td>
                  <td>Edit</td>
                  <td>Delete</td>
                </tr>
<tr>
                  <td>
                    Category1
                  </td>
                  <td>Edit</td>
                  <td>Delete</td>
                </tr>
<tr>
                  <td>
                    Category1
                  </td>
                  <td>Edit</td>
                  <td>Delete</td>
                </tr>
<tr>
                  <td>
                    Category1
                  </td>
                  <td>Edit</td>
                  <td>Delete</td>
                </tr>
<tr>
                  <td>
                    Category1
                  </td>
                  <td>Edit</td>
                  <td>Delete</td>
                </tr>
<tr>
                  <td>
                    Category1
                  </td>
                  <td>Edit</td>
                  <td>Delete</td>
                </tr>
<tr>
                  <td>
                    Category1
                  </td>
                  <td>Edit</td>
                  <td>Delete</td>
                </tr>
<tr>
                  <td>
                    Category1
                  </td>
                  <td>Edit</td>
                  <td>Delete</td>
                </tr>
<tr>
                  <td>
                    Category1
                  </td>
                  <td>Edit</td>
                  <td>Delete</td>
                </tr>
<tr>
                  <td>
                    Category1
                  </td>
                  <td>Edit</td>
                  <td>Delete</td>
                </tr>
<tr>
                  <td>
                    Category1
                  </td>
                  <td>Edit</td>
                  <td>Delete</td>
                </tr>
<tr>
                  <td>
                    Category1
                  </td>
                  <td>Edit</td>
                  <td>Delete</td>
                </tr>
<tr>
                  <td>
                    Category1
                  </td>
                  <td>Edit</td>
                  <td>Delete</td>
                </tr>
<tr>
                  <td>
                    Category1
                  </td>
                  <td>Edit</td>
                  <td>Delete</td>
                </tr>
<tr>
                  <td>
                    Category1
                  </td>
                  <td>Edit</td>
                  <td>Delete</td>
                </tr>
<tr>
                  <td>
                    Category1
                  </td>
                  <td>Edit</td>
                  <td>Delete</td>
                </tr>
<tr>
                  <td>
                    Category1
                  </td>
                  <td>Edit</td>
                  <td>Delete</td>
                </tr>
<tr>
                  <td>
                    Category1
                  </td>
                  <td>Edit</td>
                  <td>Delete</td>
                </tr>
<tr>
                  <td>
                    Category1
                  </td>
                  <td>Edit</td>
                  <td>Delete</td>
                </tr>
<tr>
                  <td>
                    Category1
                  </td>
                  <td>Edit</td>
                  <td>Delete</td>
                </tr>
<tr>
                  <td>
                    Category1
                  </td>
                  <td>Edit</td>
                  <td>Delete</td>
                </tr>
<tr>
                  <td>
                    Category1
                  </td>
                  <td>Edit</td>
                  <td>Delete</td>
                </tr>
<tr>
                  <td>
                    Category1
                  </td>
                  <td>Edit</td>
                  <td>Delete</td>
                </tr>
<tr>
                  <td>
                    Category1
                  </td>
                  <td>Edit</td>
                  <td>Delete</td>
                </tr>
                
            </table>
          </div>
        </div>
      </div>
      <div id="add-type" class="hide">
        <div class="form">
          <div class="form-group form-group-lg">
            <form method="post" action="">
              <label>Category :</label><br>
              <select name="category" class="form-control">
                                <?php
                                $categories = $wpdb->get_col('SELECT DISTINCT category FROM '.$ps_category_table_name);
                                foreach ($categories as $category){ ?>
                                    <option value="<?php echo $category; ?>"><?php echo $category; ?></option>
                                    <?php
                                }
                                ?>
                            </select><br><br>
              <label>Types :</label><br>
              <input type="text" name="type" placeholder="type" class="form-control" /><br>
              <button type="submit" name="save-type" class="btn btn-default btn-lg">Save</button>
            </form>
          </div>
        </div><br>
        <div class="form view">
          <label>List of Types</label>
          <div class="table-responsive">
            <table class="table table-hover">
              <tr>
                <th>Categories</th>
                <th>Types</th>
                <th>Update</th>
                <th>Delete</th>
              </tr>
              <?php
                            $result = $wpdb->get_results('SELECT category, type FROM '.$ps_type_table_name, ARRAY_A);
                            foreach ($result as $value){ ?>
                <tr>
                  <td>
                    <?php echo $value['category']; ?>
                  </td>
                  <td>
                    <?php echo $value['type']; ?>
                  </td>
                  <td>Edit</td>
                  <td>Delete</td>
                </tr>
                <?php
                            }
                            ?>
            </table>
          </div>
        </div>
      </div>
      <div id="add-product" class="hide form">
        <div class="form-group form-group-lg">
          <form method="post" action="">
            <label>Category :</label><br>
            <select id="category" name="category" class="form-control">
                            <?php
                            $categories = $wpdb->get_col('SELECT DISTINCT category FROM '.$ps_type_table_name);
                            foreach ($categories as $category){ ?>
                                <option value="<?php echo $category; ?>"><?php echo $category; ?></option>
                                <?php
                            }
                            ?>
                        </select><br><br>
            <label>Types :</label><br>
            <select id="type" name="type" class="form-control">

                        </select><br><br>
            <label>Name :</label><br>
            <input type="text" name="name" placeholder="name" class="form-control" /><br><br>
            <label>Description :</label><br>
            <textarea name="description" placeholder="description" class="form-control"></textarea><br>
            <div class="img-preview-wrapper">
              <img id="img-preview" src="<?php echo wp_get_attachment_url(get_option('media_selector_attachment_id')); ?>" height="100px" />
            </div><br>
            <input id="upload_image_button" type="button" class="btn btn-default btn-lg" value="Upload Image" />
            <input type="hidden" name="image-attachment-id" id="image-attachment-id" value="<?php echo get_option('media_selector_attachment_id'); ?>" />
            <input type="submit" name="save-details" value="Save" class="btn btn-default btn-lg" />
          </form>
        </div>

      </div>
      <div id="view" class="hide">
        <div class="form view">
          <label>All Product Details</label>
          <div class="table-responsive">
            <table class="table table-hover">
              <tr>
                <th>Categories</th>
                <th>Types</th>
                <th>Name</th>
                <th>Description</th>
                <th>Image</th>
                <th>Update</th>
                <th>Delete</th>
              </tr>
              <?php
                            $result = $wpdb->get_results('SELECT category, type,image_path, name, description FROM '.$ps_detail_table_name, ARRAY_A);
                            foreach ($result as $value){ ?>
                <tr>
                  <td>
                    <?php echo $value['category']; ?>
                  </td>
                  <td>
                    <?php echo $value['type']; ?>
                  </td>
                  <td>
                    <?php echo $value['name']; ?>
                  </td>
                  <td>
                    <?php echo $value['description']; ?>
                  </td>
                  <td><img id="product-img" src="<?php echo $value['image_path']; ?>" height="50px" width="50px" /></td>
                  <td>Edit</td>
                  <td>Delete</td>
                </tr>
                <?php
                            }
                            ?>
            </table>
          </div>
        </div>
      </div>

    </div>
  </div>
  <div id="footer" class="footer">
    <div class="footer-left"><span>Wpmagik carousel plugin</span></div>
    <div class="footer-right">
      <button name="reset" class="btn btn-default">Reset</button>
    </div>
  </div>
</div>

这是我的代码请给我一个解决方案，让我的侧边栏全高，灵活，意味着如果我的内容更多，那么菜单也覆盖全高度的内容覆盖。

1 个答案:

答案 0 :(得分：2)

您可以使用display:flex。所以左栏和内容的高度相同

另外，如果您使用bootstrap

，为什么不使用rows网格系统，例如cols和bootstrap css

编辑：当然，您的代码无效，因为您没有添加我的解决方案:)，display:flex上的div包含side-bar和{{} 1}}

我在content上添加了display:flex，并将样式更改为内容，并将.body更改为如下

side-bar

请参阅下面的完整摘录

＆＃13;
＆＃13; 
.body {
  display: flex;
}
.content {
  top: 0;
  background-color: #e8e8f0;
  height: 100%;
  padding: 20px 20px 0px 20px;
  width: calc(100% - 200px);
  box-sizing:border-box;
}
.side-bar {
  width: 200px;
  float: left;
  background-color: #2c3133;
}
＆＃13; 
.body {
  display: flex;
}
.content {
  top: 0;
  background-color: #e8e8f0;
  height: 100%;
  padding: 20px 20px 0px 20px;
  width: calc(100% - 200px);
  box-sizing:border-box;
}
.side-bar {
  width: 200px;
  float: left;
  background-color: #2c3133;
}

.hide {
  display: none;
}

.main {
  width: 1700px;
  margin: auto;
}

.body {
  width: 1700px;
  font-family: lato, Verdana, "Times New Roman", Calibri;
  font-size: medium;
  border: 1px solid dodgerblue;
}

.header {
  background-color: #f0f0f8;
  margin: 0 auto;
  height: 70px;
  border-radius: 20px 20px 0px 0px;
  text-align: left;
  padding: 0px 5px 0px 15px;
  border: 1px solid dodgerblue;
  color: dodgerblue;
}

.header h2 {
  margin-top: 9px;
  font-weight: bold;
  padding-top: 9px;
}



ul.menu-list {
  padding-left: 0px;
}

ul.menu-list li {
  list-style: none;
}

ul.menu-list li a {
  color: #f5ebf4;
  display: block;
  padding: 12px;
  border-bottom: 1px solid #bbb6c0;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  -moz-transition: 0.2s;
  transition: 0.2s;
  text-decoration: none;
}

ul.menu-list li a:hover {
  background-color: dimgrey;
  padding-left: 15px;
}

ul.menu-list li a.selected {
  background-color: dimgrey;
}



.footer {
  background-color: #faf3ff;
  height: 60px;
  border-radius: 0px 0px 20px 20px;
  padding: 10px;
  border: 1px solid dodgerblue;
}

.footer-right {
  float: right;
  margin: auto;
}

.footer-left {
  float: left;
  padding-top: 8px;
}

.form {
  padding: 20px;
  border: 1px solid #bbb6c0;
  border-radius: 10px;
}

.table-responsive {
  overflow-x: hidden;
  overflow: auto;
  height: 100%;
  max-height: 800px;
}

.view {
  margin-bottom: 20px;
}

.body,
.side-bar,
.content {
  min-height: 730px;
}
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题