Question

我一直在尝试对网站进行编码，让主要部分在所有设备上显示100％的屏幕（即徽标，导航栏，滑块和引号填满整个屏幕，然后向下滚动，然后下一个部分是＆＃39;与我联系＆＃39;）。在我的笔记本电脑屏幕和iPhone 6上，它看起来是正确的，但在较小的移动屏幕上（当我将浏览器的大小调整为小尺寸时），请联系我＆＃39;部分似乎崩溃了其他内容。

我已经尝试在div上设置最小宽度（因为这似乎是许多建议），但没有运气。

我已经附上了该网站的链接，我们非常感谢任何建议。

http://176.32.230.9/andycheckcheck.co.uk/homepage.html

Answer 1

你有这个CSS规则：

.firstSection {
    height: 100%;
    width: 100%;
    background-color: #EDF4ED;
}

将height更改为min-height并将height: 100%添加到body：

.firstSection {
    min-height: 100%;
    width: 100%;
    background-color: #EDF4ED;
}
body {
    height: 100%;
}

Answer 2

如果您不希望单词在空白处崩溃，我建议您为white-space: nowrap＆＃34;与我联系＆＃34;添加h2样式。元件。

CSS：

.nowrap {  
  white-space: nowrap;
}

HTML：

<h2 class="nowrap">Contact Me</h2>

如何阻止div折叠其他html内容

2 个答案: