Question

我有两个div容器，我已经修复了它的高度和宽度。其中一个容器包含blogpost的主体，其他容器包含所有创建的帖子的列表。因为，博客帖子的主体或帖子列表可能大于其div容器的大小。因此，我希望在超出容量大小时动态增加容器的大小。如何使用css或javascript实现它？

css文件

body {
    background-color:#FFCCFF;
}
#container {
    position:absolute;
    top:50px;
    left:100px;
    right:100px;
    bottom:50px;
}
#content {
    margin-top:20px;
    padding:0;
    width:70%;
    height:550px;
    border:1px solid black;
    background-color: #282828 ;
    color:white;
}
#footer {
    width:100%;
    height:50px;
    border:1px solid black;
}
#rightnav {
    position:absolute;
    top:18px;
    right:20px;
    width:275px;
    height:550px;
    background-color: #282828 ;
}
#rightnav p {
    margin:0px 0 10px 0px;
    padding:0px;
    color:#CCCCFF;
}
#rightnav h2 {
    text-align: center;
    background-color: #000000;
    margin:0;
    color:#FF9900;
}
#rightnav a {
    text-decoration: none;
}
#posts {
    padding:0;
    width:80%;
    border:1px solid black;
}
#posts h2 {
    margin:0;
    padding:0;
}
#posts p {
    margin:5px;
    padding:0;
}
#content a {
    text-decoration: none;
    background-color: none;
    color:black;
}

base.html #every其他html文件继承自此基本文件

{% load staticfiles %}
<html>
<head>
<link rel="stylesheet" href="{% static 'css/base.css' %}" type="text/css">
</head>
<body>
<div id = "container" style="clear:both;">
<div id = "content">
{% block post %}
{% endblock %}
</div>
<div id = "rightnav">
<h2>Popular Posts</h2>
{% block popular_posts %}
{% endblock %}
</div>
</div>
</body>
</html>

post.html #the处理展示帖子的模板

{% extends "blog/base.html" %}
{% block post %}
{% load django_markdown %}
<h2>{{post.title}}</h2>
{{ post.body|markdown }}
{% endblock %}
{% block popular_posts %}
    {% for post in posts %}
    <a href = "/home/{{post.id}}"><p>{{ post.title }}</p></a>
{% endfor %}
{% endblock %}

Answer 1

添加到Marcanuy的答案，你必须删除底部：50px给#container div。

通过删除位置：绝对不需要的地方将使你的CSS整洁。如果你想并排放置你的div，你可以使用display：flex作为你的父（#container）div。

编辑：还删除了位置：绝对属性并添加了保证金：50px使您的div居中对齐。（您也可以使用填充属性）

参考：JsFiddle

#container {
 position:absolute;
 top:50px;
 left:100px;
 right:100px;
}

#content {
 padding:0;
 width:70%;
 min-height:550px;
 border:1px solid black;
 background-color: #282828 ;
 color:white;
}
#rightnav {
 width:275px;
 min-height:550px;
 background-color: #282828 ;
}

Answer 2

使用 min-height 更改身高，这会使您的容器至少指定的高度，然后它们会增长并满足他们的内容需求。

#rightnav {
    min-height:550px;
}
#content {
    min-height:550px;
}

动态增加div容器

2 个答案: