Python 动态增加div容器的高度_Python_Html_Css_Django

Python 动态增加div容器的高度

python html css django

Python 动态增加div容器的高度,python,html,css,django,Python,Html,Css,Django,我有两个div容器，我已经确定了高度和宽度。其中一个容器保存blogpost的主体，另一个容器保存创建的所有帖子的列表。因为，blogpost或post列表的主体可以大于其div容器的大小。所以，我想在容器超过其大小时动态增加容器的大小。如何使用css或javascript实现它 css文件 body { background-color:#FFCCFF; } #container { position:absolute; top:50px; left:100px

我有两个div容器，我已经确定了高度和宽度。其中一个容器保存blogpost的主体，另一个容器保存创建的所有帖子的列表。因为，blogpost或post列表的主体可以大于其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#每隔一个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>

{%load staticfiles%}
{%block post%}
{%endblock%}
热门帖子
{%block popular_posts%}
{%endblock%}

post.html#用于显示帖子的模板

{% 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 %}

{%extends“blog/base.html”%}
{%block post%}
{%load django_markdown%}
{{post.title}
{{post.body | markdown}}
{%endblock%}
{%block popular_posts%}
{posts%%中的post为%s}
{%endfor%}
{%endblock%}

使用更改您的高度，这将使您的容器至少具有指定的高度，然后它们将增长并适合其内容需求

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

再加上Marcanuy的回答，您必须删除底部：50px给#container div

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

编辑：还删除了position:absolute属性，并添加了margin:50px以使div中心对齐。（也可以使用padding属性）

参考：

绝对定位是一种非常糟糕的网页布局方法。它极不灵活，而且有更好、更灵活的选择。退房

#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 ;
}