Question

假设我有这样的内容div：

<div id="content">
</div>

我想知道CSS是否有可能将此div设置为具有最小高度（例如，让700px表示）以及放置在此{{1}内的所有内容如果其内容的高度之和大于div的高度，则只会伸展（使其高度更长）div。

我尝试使用div属性，但它根本不起作用。我放在min-height内的所有内容都会使其更长。

更新

这是我的应用程序的一些页面与css文件（css文件中的内容div的id是div）不幸的是我的代码不是英文，但我认为这是无关紧要的。如果您能发现错误，为什么conteudo属性不起作用：

acessonegado.xhtml

min-height

gruposemailservidores.css

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head id="j_idt2">
        <title>Grupos de E-mail de Servidores</title>
        <link href="resources/css/gruposemailservidores.css" rel="stylesheet" type="text/css" />
        <link href="resources/css/layout.css" rel="stylesheet" type="text/css" />
        <link href="resources/css/acessonegado.css" rel="stylesheet" type="text/css" /></head><body>
        <div id="cabecalho">
            <img src="resources/img/ufca.png" alt="Universidade" />
            <span>Grupos de E-mail de Servidores</span>
        </div>
<form id="form" name="form" method="post" action="/gruposemailservidores/acessonegado.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="form" value="form" />

            <div id="usuario">
                <div>
                    ADMIN<br />UNIVERSIDADE
                </div>
            </div>

            <div id="barraTitulo">Acesso Negado
<a href="#" title="Sai do Grupos de E-mail de Servidores">Sair</a>
            </div>

            <div id="conteudo">
        <p>Este aplicativo é de uso exclusivo de servidores da</p>
        <p>COORDENADORIA DE INFRAESTRUTURA DE TI</p>
            </div><input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="-8939669570174810183:-4107362002777505590" autocomplete="off" />
</form>

        <div id="rodape">
            <p>aaaaaaaaaaaaa</p>
            <p>bbbbbbbbbbbbb</p>
        </div></body>
</html>

layout.css中

body
{
    margin: 0;
    padding: 0;
    font-family: verdana, arial, sans-serif;
    font-size: 70%;
}

#cabecalho
{
    height: 84px;
    background-color: #dde8df;
    border-bottom: 1px solid #6f9b76;
}

#cabecalho img
{
    position: absolute;
    top: 4px;
    left: 10px;
}

#cabecalho span
{
    position: absolute;
    top: 23px;
    left: 145px;
    font-family: trebuchet ms, arial, sans-serif;
    font-size: 240%;
    font-weight: bold;
    color: rgba(0, 83, 83, 0.8);
    text-shadow: 2px 8px 6px rgba(0, 0, 0, 0.2), 0px -5px 35px rgba(255, 255, 255, 0.3);
}

#rodape
{
    font-size: 90%;
    color: white;
    background-color: #6f9b76;
    text-align: center;
    padding: 10px 0;
}

#rodape p
{
    margin: 0;
}

#rodape p:first-child
{
    margin-bottom: 2px;
}

input, select, textarea, button
{
    font-family: inherit;
    font-size: 100%;
}

input[type="submit"], input[type="button"]
{
    border: 1px solid;
}

.ui-dialog
{
    box-shadow: 5px 5px 5px #888;
    -webkit-box-shadow: 5px 5px 5px #888;
    -moz-box-shadow: 5px 5px 5px #888;
}

.ui-dialog #iconeAlerta
{
    float: left;
    margin: 0 7px 10px 0;
}

.ui-dialog #emailGrupoSetor
{
    font-style: italic;
}

acessonegado.css

#form #usuario
{
    position: absolute;
    height: 84px;
    top: 0;
    margin-right: 10px;
    right: 0;
    font-size: 105%;
    color: #608a66;
}

#form #usuario div
{
    height: 84px;
    display: table-cell;
    vertical-align: middle;
}

#form #barraTitulo
{
    color: white;
    font-size: 130%;
    font-weight: bold;
    background-color: #6f9b76;
    margin: 0;
    padding: 2px 10px;
}

#form #barraTitulo a
{
    float: right;
    color: white;
    font-size: 75%;
    font-weight: normal;
    text-decoration: underline;
}

#form #conteudo
{
    margin: 5px 10px;
    min-height: 750px;
}

Answer 1

使用min-height效果很好。看小提琴：http://jsfiddle.net/1g1pdqbc/6/

div {
    min-height: 100px;
    background-color: blue;
    width: 100px;
}

两个div都设置为min-height: 100px，但第二个div中有额外的东西并使其更高。

Answer 2

这可能会有所帮助

/**
 * 
 */
package <your_package>;

import java.io.Serializable;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.Id;
import javax.persistence.IdClass;
import javax.persistence.JoinColumn;
import javax.persistence.ManyToOne;
import javax.persistence.Table;

/**
 *
 */
@Entity
@Table(name="EMPLOYEESKILLSET")
    @AssociationOverrides({ @AssociationOverride(name = "pk.employee", joinColumns = @JoinColumn(name = "EMPLOYEEID")),
    @AssociationOverride(name = "pk.sk", joinColumns = @JoinColumn(name = "SKILLSETID")) })
public class EmployeeSkillSet implements Serializable {

    @EmbeddedId
    private EmployeeSkillSetPK pk = new EmployeeSkillSetPK();

    @Column 
    private Integer numberOfYears;

    @Transient
    public Employee getEmployee() {
        return pk.getEmployee();
    }

    public void setEmployee(Employee employee) {
        pk.setEmployee(employee);
    }

    @Transient
    public SkillSet getSkillSet() {
        return pk.getSkillSet();
    }

    public void setSkillSet(SkillSet sk) {
        pk.setSkillSet(sk);
    }

    public Integer getNumbersOfYears() {
        return numberOfYears;
    }

    public void setNumbersOfYears(Integer numberOfYears) {
        this.numberOfYears = numberOfYears;
    } 
}

如何设置div的最小高度并仅在需要时才拉伸？

2 个答案: