Javascript 在具有可变高度的父div中使用自动边距制作div

我有这个密码

<div style="position: relative;">
    /***main***/

    <div style="top:0">
        /*****Content1****/
    </div>

    <div>
        /*****Content2****/
    </div>

    <div>
        /*****Content2****/
    </div>

    <div style="bottom:0">
        /*****Content4****/
    </div>

</div>

/***主要***/
/*****内容1****/
/*****内容2****/
/*****内容2****/
/*****内容4****/

我希望content1始终位于顶部，content4始终位于底部，还希望content2和content3平均调整上下边距，使其看起来均匀，我无法做到这一点，因为父div的高度可变，而所有其他div的高度固定

---

我想这会帮助你理解我想要什么

请帮助，

您可以尝试以下方法：

/*****内容1****/
/*****内容2****/
/*****内容3****/
/*****内容4****/
#主要{
保证金：0自动；
宽度：960px；
背景：红色；
}
#内容1{
高度：80px；
背景：灰色；
}
#内容2{
宽度：480px；
高度：300px；
浮动：左；
背景：黄色；
}
#内容3{
宽度：480px；
高度：300px；
浮动：对；
背景：棕色；
}
#底部{
高度：50px；
明确：两者皆有；
背景：蓝色；；
}

你有样式表吗？还是从零开始？你可以访问我在右侧使用过的网站，你可以看到它造成了什么混乱尝试在包含Content1和Content4的div中添加“position:absolute；”。Content1，content2，content3和content4一个比一个低，main在不同的页面上有不同的高度，但所有页面的宽度都是250px。我认为这将帮助您理解我想要的内容。在这种情况下，您必须使用%而不是px。但这是相同的原则。显示您在JSFIDDLE中尝试的内容这里我给了父div高度，但这是可变的，我们不能指定它。我希望另一个div之间的顶部和底部边距相等，以便它看起来均匀。

<div id="main">
    <div id="content1">/*****Content1****/</div>
    <div id="content2">/*****Content2****/</div>
    <div id="content3">/*****Content3****/</div>
    <div id="bottom">/*****Content4****/</div>
</div>

#main{
    margin: 0 auto;
    width: 960px;
    background: red;
}

#content1{
    height: 80px;
    background: gray;
}

#content2{
    width:480px;
    height: 300px;
    float: left;
    background: yellow;
}

#content3{
    width:480px;
    height: 300px;
    float: right;
    background: brown;
}

#bottom{
    height: 50px;
    clear:both;
    background: blue;;
}