Css媒体查询问题

Question

您好我创建了一个示例网站作为练习...为什么我的＆lt; h3 id =＆＃34; art＆＃34; ＆GT;下到页脚部分，同时缩小我的屏幕620宽度，并且，大空间将显示.. 如何删除页脚下的空间，我不希望我的文字页脚

以下是示例网站：http://chess-master-guide-23476.bitballoon.com/views/main_page.html

任何解决方案？

Answer 1

嗨，这是你的css

#art {
  background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #4c4c4c 0px, #595959 12%, #666 25%, #474747 39%, #2c2c2c 50%, #000 51%, #111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%) repeat scroll 0 0;
  color: #fff;
  font-weight: 400;
  height: 572px;
  padding-left: 80px;
  padding-right: 200px;
}

你正在使用这个div的固定高度这是问题所在。 你也在使用padding-left = 80px和padding-right = 200px; 它的意思是你需要280px只用于桌面或大屏幕的填充它应该没问题但是对于移动或者你说不到620px分辨率你只有280px只有填充足够移动或低于620px分辨率。 其次，你使用固定高度的div id＆＃34; art＆＃34; 这就是为什么div仍然保持相同的大小，但文本增加长度，因为宽度正在减少。 所以你有两个问题。 使用高度动态像

height: auto;

或者不使用height属性，然后将使用元素填充高度 或使用媒体查询不同的设备。 它应该解决你的问题。现在你的文字不会下降。 但填充仍然会将文本推入较短的长度，因此您还必须调整填充。 喜欢

@media screen and (max-width: 620px) {
  padding-left: 40px;
  padding-right: 100px;
}

希望这对你有所帮助。 感谢

这是我刚刚更改的图片

身高：自动;

此图片来自设备模拟器320X640