html放置控件在指定坐标,关于html：在div或屏幕底部放置按钮

我想将按钮放置在div底部或屏幕底部(但处于非固定位置)。 我的代码结构如下所示：

div-1

div-2

div-3

纽扣

我想将按钮放在div 1的底部，该高度是使用jQuery设置的(高度是屏幕的高度，因此将按钮放在屏幕的底部也是一种解决方案)

到目前为止，我已经尝试过：

的CSS

.button {

position: fixed;

bottom: 10px;

left: 50%;

margin-left: -104.5px; /*104.5px is half of the button's width*/

}

这会将按钮居中(我想要的)，并将其放置在屏幕底部，但是位置是固定的，因此如果我向下滚动，按钮也会下降。

我也尝试将按钮的position设置为absolute，将div-1的position设置为relative，这也不起作用。

编辑：div的高度是可变的，因此边距可能不是一个很好的选择

请提供html和CSS。

当div 2和3小于div1并在顶部对齐时，不能将按钮放在div1的底部。 是的，请分享一些代码。 这将帮助我们更好地理解这个问题。 如果您只希望按钮位于屏幕底部，则可以通过css进行操作，而无需将它们放在div内(但是您可以，如果需要的话)

只需执行按钮位置即可：绝对，而无需将div相对

.button {

position: absolute;

bottom: 10px;

left: 50%;

margin-left: -104.5px; /*104.5px is half of the button's width*/

}

.test{

height:1000px;

}

test

这对我有用，虽然不确定为什么，但是谢谢！

这是因为如果您相对于div进行操作，则按钮将绝对位于div中，这是因为您做了div的嵌套

如果宽度div为50％，则必须为25％如果宽度div为70％，则必须为15％

.center{

position:fixed;

bottom:20px;

left:20%;

width:60%;

}

.center .btn{

background:red;

width:100%;

color:white;

font-weight:bold;

border-radius: 64px;

padding:10px;

}

Login

当父元素的高度和宽度为文档或页面的100％时，应在按钮上使用position：absolute。

Just a button

和CSS几乎没有复位：

* {

margin: 0;

padding: 0;

}

html, body {

width: 100%;

height: 100%;

}

.div-1 {

position: relative;

height: 100%;

width: 100%;

}

.div-2, .div-3{

width: inherit;

height: inherit;

}

button {

position: absolute;

bottom: 10px;

left: 50%;

transform: translateX(-50%);

}

这是JSfiddle

它使按钮居中，但并未将其放在div /屏幕的底部。 如果按钮的位置是固定的，则由于某种原因它将起作用。

我相信这些Stack Overflow帖子可能会对您有所帮助：

1)如何使div浮动到其容器的底部

2)HTML / CSS定位浮动底部

如果这样做没有帮助，请提供您的HTML代码。

我认为HTML代码不会有太大帮助，因为它只是其中包含Lorem Ipsum文本的嵌套div。 虐待看一下您发布的链接。

冲ido 只是想仔细检查。

给出的两个答案基本相同。 可悲的是，我已经尝试了这些方法(如我问题的最后一部分所述)

尝试使用大众汽车而不是px。

HTML：

TEST

CSS：

.button {

position: fixed;

bottom: 10px;

left: 47vw;

width: 6vw;

}

编辑：

HTML：

TEST

CSS：

.div{

position: relative;

border: 1px solid black;

width: 500px;

height: 250px;

}

.button {

position: absolute;

bottom: 5px;

left: 50%;

width: 50px;

margin-left: -25px;

}

我在看代码而不是问题，所以我忘记了真正的问题是在div或屏幕底部添加了按钮。

父div必须处于以下位置：相对；按键位置：绝对；

他不想修复。