Question

我需要一个3列页面布局的自适应网格。在我发现的所有建议中，没有一个具有所有要求。最好从没有CSS示例开始，然后从头开始。

要求：

必须与https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css
导航面板固定在页面顶部
以像素为单位固定的SIDE列
SIDE列会扩展以填充页脚的可用空间
FOOTER固定在页面底部
TEXT面板将展开以填充宽度，即：未设置为像素宽度
必须对手机有所反应

上面的两张图片显示，当屏幕变宽时，只有“文本”面板应该扩展。

我确实有上面显示的DIV的CSS，但是无论如何，我都无法使侧栏扩展到可用空间的100％。

.header {
    //
}
.navbar {
    margin-bottom: 0;
    border-radius: 0;
}
.row.content {
    height: 100%;    
}  
.sidenav {
    padding-top: 20px;
    background-color: #f1f1f1;
    display: table-cell;    
}
footer {
    background-color: #555;
    color: white;
    padding: 15px;
}
@media screen and (max-width: 767px) {
    .row.content {
        height: 100%;
        min-height: 100%;
        display: flex;
        flex-direction: column;
    } 
    .sidenav {
        height: auto;
        padding: 15px;
        display: flex;      
    }
}

<header>
  <p>Header Text</p>
</header>

<div class="container-fluid text-center">    
  <div class="row content">
  <div class="col-sm-2 sidenav">
      <p><a href="#">Link</a></p>
      <p><a href="#">Link</a></p>
      <p><a href="#">Link</a></p>
    </div>
    <div class="col-sm-8 text-left"> 
      <h1>Welcome</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <hr>
      <h3>Test</h3>
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-2 sidenav">
      <div class="well">
        <p>ADS</p>
      </div>
      <div class="well">
        <p>ADS</p>
      </div>
    </div>
  </div>
</div>

<footer class="container-fluid text-center">
  <p>Footer Text</p>
</footer>

不！它不是另一个问题的重复，因为没有其他问题可以满足所有这些要求。他们的答案也不能解决这里的所有要求。

Answer 1

您可以使用 flexbox 。如上所述，由于您必须使用Bootstrap 3.4（而不是启用了Flexbox的Bootstrap 4.x.x），因此您将必须编写一些自定义CSS：

import os
import glob

folder = os.path.join("R:", os.sep, "Files")
list = []

def notes():

    for file in glob.glob(folder):
        if file.endswith('.docx'):
            with open(file,'r+') as f:
                content = f.read()
                for text in content:
                    new_list = list.append(text)
                return new_list

print(notes())

.site-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: 50px;
}

.navbar {
  margin-bottom: 0;
}

.main {
  display: flex;
  flex: 1;
  align-items: stretch;
}

.site-footer {
  padding: 15px;
  background: #222;
  margin-top: auto;
}

.site-footer p {
  margin: 0;
  color: #fff;
  font-size: 12px;
}

@media (min-width: 768px) {

  .main>.row {
    display: flex;
    margin-top: 0;
  }
  
  .sidebar {
    background: #efefef;
  }
  
}

@media (min-width: 992px) {
  
  .sidebar {
    max-width: 400px;
    min-width: 300px;
  }
  
}

Answer 2

这里是a pen，我认为我满足所有要求。

这是经典的网格布局，主体是容器，容器上设置了min-height: 100vh;。除了主要内容1fr（可用空间的一小部分）以外，每个高度都设置为自动。

然后我使标头变得很粘，可以通过删除CSS中的position: sticky; top: 0;来撤消。

body.myContainer {
  width: 100%;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr repeat(3, auto);
  grid-template-columns: 100px 1fr 100px;
}

我使用的一个“技巧”是将main设置为display: contents;，以便将内部内容直接放入网格中，尽管在这里并不需要。
我添加了bootsrap样式表，但似乎没有干扰。

我还添加了额外的两行高度auto，并在屏幕小于max-width: 767px的情况下使用它们来移动辅助对象。如果不使用，它们将折叠<。

这里是a second version，页眉和页脚带有粘性。

我在页脚使用position: sticky; top: 0;，在页眉使用bottom: 0。

注意：在使用sticky时，添加position: -webkit-sticky;以支持safari很重要。

这里是an example，其中我将第一个布局与您的代码一起使用。
Boostrap将设置一些边距，填充，高度等。因此，您必须覆盖它们以使其适合您。例如，我将类myHeader放在navbar-wrapper中，将navbar-fixed-top删除了nav和css中：

div.myHeader > .container,
div.myHeader > .container .navbar
{
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

我只是使用检查器来找出将这些对象应用到哪里...

为响应式3列DIV网格进行CSS布局

2 个答案: