Основная проблема в том, что ваш элемент .content
не имеет закрывающего div
.
<div class="content">What is your reaction to receiving criticism?<div>
Другая проблема заключается в том, что width: 100vh
не дает полной ширины, которую вы ожидаете.
.container {
height: 100vh;
width: 100vh;
display: grid;
...
...
}
Вы используете высоту области просмотра единиц для ширины. Я думаю, что вы хотели vw
.
Но, в конце концов, вам это не нужно, поскольку блочные элементы по умолчанию занимают всю ширину.
Кроме того, если вам нужна полная ширина, вам не нужны значения end
.
.footer {
background-color: #000000;
grid-area: f;
justify-self: end;
align-self: end;
}
.container {
height: 100vh;
display: grid;
grid-template-columns: 1fr 5fr 1fr;
grid-template-rows: 2fr 9fr 1fr;
grid-template-areas: "h h h"
"c c c"
"f f f";
}
.header {
grid-area: h;
background-color: #000000;
}
.content {
grid-area: c;
background-color: #ffff00;
}
.footer {
grid-area: f;
background-color: #000000;
}
body {
margin: 0;
}
<div class="container">
<div class="header">
<div>
<a href="index.asp">
<img src="images/title-img-640.png" class="logo" alt="Play to Evolve" title="Play to Evolve">
</a>
</div>
</div>
<div class="content">
What is your reaction to receiving criticism?
</div>
<div class="footer">
<div class="textFooterSmall">
Copyright 2019 ClearSay.net<br>
</div>
<div></div>
<div class="textFooterSmall">
design by <a class="footerlinkSmall" href="http://www.OceanMedia.net" target="_blank">OceanMedia.net</a><br>
<a class="footerlinkSmall" href="admin_menu.asp">admin</a>
</div>
</div>
</div>
При владении Mac можно загрузить iPhone SDK, который идет со средством моделирования iPhone. Это работает не только на отладку исходного приложения, но также и на просмотр веб-сайтов.
Я не подразумеваю сделать больше, чем веб-поиск, но проблема, кажется, решен несколькими продуктами, которые являются "эмуляторами веб-приложения iPhone".
Существует бесплатное приложение на Mac, который эмулирует браузер iPhone: iPhoney
Если у Вас есть Safari на Вашем компьютере, можно включить меню "Develop" под Предпочтениями> Усовершенствованный>, Шоу Разрабатывает Меню в Строке меню.
С этим включил, можно пойти, чтобы Разработать> Агент пользователя и изменить строку агента пользователя на устройство, о котором Вы хотите, чтобы Ваш браузер сообщил веб-серверу как. Путем изменения размеров окна к соответствующей ширине можно эмулировать то, на что сайт будет похож на iPhone.
Позитивный аспект этого - то, что это быстро, это работает и над Windows и над Mac, и Вам не нужен установленный iPhone SDK. Можно также просмотреть определенные для iPhone версии веб-сайтов, которые ловят строки агента пользователя непосредственно от ПК.
Оборотная сторона является, очевидно, Вашим браузером Safari на Вашем ПК, будет вести себя более быстрый, чем на существующем устройстве (особенно в отношении производительности JavaScript); это отображает плагины и показывает шрифты, которые не могут быть доступными на фактической iPhone OS; отсутствие мультисенсорной поддержки и "привязывающийся" к столбцам при прокрутке; никакая авторотация; никакой multi-touch/pinch-zoom; виджеты будут выглядеть по-другому; и т.д.