html - 遍历页面的 HTML 容器

Question

我对 HTML 比较陌生，但是从我的 django 应用程序中得到了一个奇怪的结果。我已经概述了我所拥有的内容与我在下面寻找的内容以供参考。正如您在我的代码中看到的那样，我调用高度的唯一位置是在 iframe 中，该 iframe 将容器 2 之外的其余内容向下推。容器一还用于扩展页面的整个高度（这只是一个侧栏），并且在最后一个容器之后的页面底部应该有一些填充。

知道为什么会这样吗？

HTML

<div class="float-container">  <!--Contents-->

  <div class="one"> <!--Left Panel-->

<ul class="list-group"> <!--Section Selection-->
  <li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
      <a href="http://127.0.0.1:7000/polls" style="color:black">Page 1</a>
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
    Page 2
    <span class="badge badge-primary badge-pill">2</span>
  </li>
  <li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
    Page 3
    <span class="badge badge-primary badge-pill">1</span>
  </li>
  <li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
    Page 4
    <span class="badge badge-primary badge-pill">1</span>
  </li>
</ul> 
  <div class="two" style="padding-left: 15px;padding-right: 15px">

   <h1 style="font-size: 24px; color: black; padding-left: 15px;padding-top: 55px;padding-bottom:5px">Stakeholder Mapping</h1>

<!--Visualization Card-->
   <div class="card">
        <div class="card-header">
          Visualizations
        </div>
        <div class="card-body">
          <h1 style="font-family: Graphik Black; font-size: 20px">Power BI</h1>
          <p class="card-text">NOTE: Power BI Pro is required to view this data. If visuals do not appear, this means that you do not have a Pro license</p>
          <iframe width="1220" height="1241" src="x" frameborder="0" allowFullScreen="true"></iframe>        
        </div>
      </div>
<div class="card">
       <div class="card-header">
           Data
       </div>
       <div class="card-body">
           <h1 style="font-family: Graphik Black; font-size: 20px">Raw Data</h1>
           <p class="card-text">description</p>
           <div class="row">
               <div class="col-md-12">
                   <button type="button" class="btn btn-primary badge-pill float-right" style="font-size: 14px; width:80px;" data-toggle="modal" data-target="#new">+ New</button>
               </div>
           </div>
           <br>

           <form class="form-inline my-2 my-lg-0" method="GET" action="{% url 'polls:search' %}">
               <input class="form-control mr-sm-2" type="search" name="search">
               <button class="btn btn btn-outline-info my-2 my-sm-0" type="submit"> Search </button>
           </form>
           <br>


           <table class="table table-hover" style="width:90% ">
               <thead>
                   <tr style="font-family: Graphik Black; font-size: 14px">
                       <th scope="col">#</th>
                       <th scope="col">Employee</th>
                       <th scope="col">Stakeholder Group</th>
                       <th scope="col">Quadrant</th>
                       <th scope="col">Description</th>
                   </tr>
               </thead>
               <tbody>
                   {% for stakeholder in stakeholder_list %}
                   <tr style="font-family: Graphik;font-size: 12px">
                       <td>{{ stakeholder.id }}</td>
                       <td style="font-size: 15px">{{ stakeholder.employee }}</td>
                       <td>{{ stakeholder.stakeholder_group }}</td>
                       <td>{{ stakeholder.stakeholder_quadrant }}</td>
                       <td>{{ stakeholder.description }}</td>
                       <td><button type="button" class="btn btn-danger btn-sm badge-pill" style="font-size: 11px; width:60px" data-toggle="modal" data-target="#new">Edit</button></td>
                   </tr>
                   {% endfor %}
               </tbody>
           </table>
           <a href="#" class="btn btn-success" style="float:left">Export to Excel</a>
       </div>
   </div>

样式.css

.container {
  width: 100%;
  height: 100%;
  background: rgb(233, 236, 239);
  margin: auto;
  padding: 10px;
}

.one {
  width: 15%;
  background:white;
  float: left;
}

.two {
  margin-left: 15%;
  background:  rgb(233, 236, 239);
}

当前的：

期望：

标签： htmlcssdjango

Answer 1

感谢您为您的问题提供额外的 HTML 上下文。一旦您修复了 HTML 中的错误，Soneav 的 CSS 应该可以正常工作。

就像 Soneav 提到的那样，该错误包括需要一个结束 div 标签。我建议在您的文本编辑器中获取 HTML IntelliSense（尤其是在您使用 VSCode 时），以便您的文本编辑器可以指出未闭合的标签。

以下是您的 HTML 代码，其中填写了缺失的标签

<div class="float-container">
    <!--Contents-->

    <div class="one">
        <!--Left Panel-->

        <ul class="list-group">
            <!--Section Selection-->
            <li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                <a href="http://127.0.0.1:7000/polls" style="color:black">Page 1</a>
                <span class="badge badge-primary badge-pill">14</span>
            </li>
            <li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                Page 2
                <span class="badge badge-primary badge-pill">2</span>
            </li>
            <li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                Page 3
                <span class="badge badge-primary badge-pill">1</span>
            </li>
            <li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                Page 4
                <span class="badge badge-primary badge-pill">1</span>
            </li>
        </ul>

    </div> <!-- missing closing tag added -->

    <div class="two" style="padding-left: 15px;padding-right: 15px">

        <h1 style="font-size: 24px; color: black; padding-left: 15px;padding-top: 55px;padding-bottom:5px">
            Stakeholder Mapping</h1>

        <!--Visualization Card-->
        <div class="card">
            <div class="card-header">
                Visualizations
            </div>
            <div class="card-body">
                <h1 style="font-family: Graphik Black; font-size: 20px">Power BI</h1>
                <p class="card-text">NOTE: Power BI Pro is required to view this data. If visuals do not appear,
                    this means that you do not have a Pro license</p>
                <iframe width="1220" height="1241" src="x" frameborder="0" allowFullScreen="true"></iframe>
            </div>
        </div>
        <div class="card">
            <div class="card-header">
                Data
            </div>
            <div class="card-body">
                <h1 style="font-family: Graphik Black; font-size: 20px">Raw Data</h1>
                <p class="card-text">description</p>
                <div class="row">
                    <div class="col-md-12">
                        <button type="button" class="btn btn-primary badge-pill float-right"
                            style="font-size: 14px; width:80px;" data-toggle="modal" data-target="#new">+
                            New</button>
                    </div>
                </div>
                <br>

                <form class="form-inline my-2 my-lg-0" method="GET" action="{% url 'polls:search' %}">
                    <input class="form-control mr-sm-2" type="search" name="search">
                    <button class="btn btn btn-outline-info my-2 my-sm-0" type="submit"> Search </button>
                </form>
                <br>


                <table class="table table-hover" style="width:90% ">
                    <thead>
                        <tr style="font-family: Graphik Black; font-size: 14px">
                            <th scope="col">#</th>
                            <th scope="col">Employee</th>
                            <th scope="col">Stakeholder Group</th>
                            <th scope="col">Quadrant</th>
                            <th scope="col">Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for stakeholder in stakeholder_list %}
                        <tr style="font-family: Graphik;font-size: 12px">
                            <td>{{ stakeholder.id }}</td>
                            <td style="font-size: 15px">{{ stakeholder.employee }}</td>
                            <td>{{ stakeholder.stakeholder_group }}</td>
                            <td>{{ stakeholder.stakeholder_quadrant }}</td>
                            <td>{{ stakeholder.description }}</td>
                            <td><button type="button" class="btn btn-danger btn-sm badge-pill"
                                    style="font-size: 11px; width:60px" data-toggle="modal"
                                    data-target="#new">Edit</button></td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                <a href="#" class="btn btn-success" style="float:left">Export to Excel</a>
            </div>
        </div>
    </div> <!-- missing closing tag added -->
</div> <!-- missing closing tag added -->