css底部图片高度自动撑开

CSS底部图片高度自动撑开是一个常见的网页布局问题。当我们使用CSS来布局网页时，常常会遇到需要在底部添加一张图片的情况。如果我们不使用特殊的技巧，很难让底部图片的高度自动撑开，使得网页布局看起来非常不协调。

解决这个问题的关键在于使用CSS的 position 属性和 bottom 属性。我们可以将底部图片的 CSS属性设置为：

position: absolute;
bottom: 0;

这样做的效果是将底部图片固定在网页底部，而不管网页的内容有多少，底部图片都会在底部停留。但是，这样的做法会导致底部图片的高度无法自动撑开，因为它的高度被固定了。

为了解决这个问题，我们需要一个容器来包含底部图片，并设置这个容器的高度为100%。这个容器的 CSS属性应该设置为：

position: relative;
height: 100%;

接下来，我们将底部图片放入这个容器中，并将底部图片的 CSS属性设置为：

position: absolute;
bottom: 0;
width: 100%;

这样做的效果是，底部图片会被放置在容器的底部，同时它的高度会自动撑开，以保证容器的高度为100%。

总之，使用CSS的 position 属性和 bottom 属性，以及一个容器来包含底部图片，可以很好地解决底部图片高度自动撑开的问题。这种技巧常常被用于网页布局中，特别是在需要在底部添加图片的情况下。