Question

最好的css方法是将侧边栏固定在左边，同时使网站的其余部分以全宽度向右浮动（减去侧边栏宽度，例如100px）。

public static void main(String[] args) throws InterruptedException {
    CountDownLatch latch = new CountDownLatch(1);
    // connect to the local database server,default:127.0.0.1:27017
    MongoClient mongoClient = MongoClients.create();
    // get handle to "testDB" database
    MongoDatabase database = mongoClient.getDatabase("testDB");
    // get a handle to the "test" collection
    MongoCollection<Document> collection = database.getCollection("test");

    collection.insertOne(new Document("lala", "hehe"),
                         (result, t) -> {
                             System.out.println("Operation Finished!");
                             latch.countDown();
                         });

    latch.await();
}

感谢。

Answer 1

我刚给你example，请查看：

Side-Content

它是如何运作的？

定义一个主div，您将在其中找到主要内容和侧面内容，我称之为页面，并将以下 CSS 属性添加到其中：

.page {
    display: table;
    direction: rtl;
    width: 100%;
    line-height: 1.5;
}

其次，添加主要内容 CSS 属性，如下所示;

.main {
    background: #eee;
    float: right;
    display: table-cell;
    direction: ltr;
    width: 100%;
    vertical-align: top;
    padding: 0 1em;
}

以及旁边内容之后：

.sidebar {
    background: #ccc;
    display: table-cell;
    direction: ltr;
    width: 12em;
    vertical-align: top;
    padding: 0 1em;
}

将main div display设置为table后，您允许元素的行为类似于table元素，因此稍后您可以调用sub-divs并且通过添加display table-cell，您可以让元素的行为类似于<td>元素，为您的单元格定义特定的宽度，并将它们彼此相邻地分配。

Answer 2

flexbox可以做到这一点。

* {
  margin: 0;
  padding: 0;
}
html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
}
.sidebar {
  flex: 0 0 160px;
  background: lightblue;
}
.page-wrapper {
  flex: 1 1 auto;
  background: orange;
}

<div class="sidebar">
  <p>Should be fixed, full height, 160px Width.</p>
</div>

<div class="page-wrapper">
  <p>Should be full width minus the sidebar width</p>

</div>

JSfiddle Demo

响应式固定边栏CSS

2 个答案: