内容＆gt;形式

Question

大家好！当它内部的形状高度变得更大时，我遇到了改变块高度的问题（可能它只是这样，不知道）。我的样本http://jsfiddle.net/vXNCD

也许我有这个问题，因为我使用

为form提供了职位

position: relative;
    left: 13em;
    top: 9em;

如果是这样，如何正确定位？如何让我的#content覆盖所有inputs？

Answer 1

您应该向padding-bottom: 9em添加#content > form。该值应等于或大于top: 9em。通过这种方式，您的表单将保留在块内。请参阅此jsfiddle。

#content > form
{
    position: relative;
    left: 13em;
    top: 9em;
    padding-bottom: 9em;
}

或者更好的是，您应该使用padding-top: 9em而不是top: 9em，以便完全避免此问题。见jsfiddle。

#content > form
{
    position: relative;
    left: 13em;
    padding-top: 9em;
}

Answer 2

如果您希望将表单稍微放在一边，请在父元素中使用填充而不是相对位置。

这是小提琴：http://jsfiddle.net/vXNCD/13/

我所做的是删除位置相对并添加填充到#content div并添加box-sizing以确保填充被计为宽度的一部分。

#content
{
    width: 70%;
    min-height: 30em;
    background-color: rgba(62,96,111,0.9);
    position: relative;
    margin: 5em auto;

    -webkit-border-radius: 0.42em;
    -moz-border-radius: 0.42em;
    -o-border-radius: 0.42em;
    -ms-border-radius: 0.42em;
    border-radius: 0.42em;

    padding: 9em 13em;    

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Answer 3

您的元素位于相对位置。使用填充来定位内容而不是顶部和左侧。

    #content > form {
    position: relative;
    padding: 40px 60px;
    }

Answer 4

如果你想要的只是在框内获取表格，我不明白为什么你应该使用相对定位。只要删除它，你会没事的。然后你可以将内容（如果你愿意）集中在保证金上：0 auto;在哪里需要。

http://jsfiddle.net/9jNZG/

#content
{
    width: 70%;
    min-height: 30em;
    background-color: rgba(62,96,111,0.9);
    margin: 5em auto;
    padding:1em;
}

只是添加了一些填充物，使它看起来更好一些喘息的空间:)，当然。删除了相对定位。

Answer 5

只需删除以下样式

即可

内容＆gt;形式

{

position: relative;
left: 13em;
top: 9em;

}

你在这里做的是调整表格（相对于＃内容），然后改变左侧和顶部位置。默认情况下，元素的位置是静态的。因此#content将覆盖所有表单数据。

div-Block高度取决于内容

5 个答案:

内容＆gt;形式