Динамически увеличивать высоту контейнера div

У меня есть два контейнера div, для которых я установил высоту и ширину. Один из контейнеров содержит тело blogpost, а другой содержит список всех созданных сообщений. Так как тело blogpost или список сообщений может быть больше размера их контейнера div. Поэтому я хочу динамически увеличить размер контейнера, когда он превышает его размер. Как я могу достичь этого, используя css или javascript?Динамически увеличивать высоту контейнера div

файл 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 %}

источник

2015-12-07 Shivam Mitra

Абсолютное позиционирование является ** очень ** беден метод выложив веб-страниц. Он чрезвычайно негибкий, и есть намного лучшие и более гибкие варианты. Проверьте [** LearnLayout.com **] (http://learnlayout.com/) –

Добавление ответа Marcanuy, вы должны удалить дно: 50px дано #container дел.

И удалив позицию: абсолютная из нежелательных мест сделает ваш css опрятным. Если вы хотите расположить свой div бок о бок, вы можете использовать display: flex для вашего родителя (#container) div.

РЕДАКТИРОВАТЬ: также удалили позицию: абсолютное свойство и добавили запас: 50px, чтобы выровнять по центру. (Вы можете также использовать свойство обивка)

См: 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 ; 
}

источник

2015-12-07 19:56:08 Imran

Изменить высота с min-height, это сделает ваши контейнеры не менее указанной высоты, тогда они будут расти и соответствовать их потребностям.

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

источник

2015-12-07 17:06:22 marcanuy

Это не решит проблему. –

Динамически увеличивать высоту контейнера div

ответ

Смежные вопросы