Так что я впервые пробую html и css. Мне не удалось заставить пропасть пустое пространство внизу сайта. Вот код html, изображения опущены для конфиденциальности
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<meta charset="utf-8">
<script src="https://use.fontawesome.com/d1341f9b7a.js"></script>
<link rel="stylesheet" href="mystyle.css">
<title>Personal Website</title>
</head>
<body>
<div class="box">
<img src="someimage.png" alt="" class="box-img" >
<h1>My Name</h1>
<h5>Heading 2</h5>
<p>Some texts in this paragraph.</p>
<ul>
<li><a href="#"><i class="fa fa-github-square" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a></li>
</ul>
</div>
</body>
</html>
Элементы описаны в следующем css коде:
@viewport{
width:device-width;
height:device-height;
zoom:1.0;
}
html{
height:100%;
padding-bottom:10%;
}
/* body{ */
/* min-height:100%; */
/* margin: 0; */
/* padding: 0; */
/* background: url(bg.jpg) no-repeat; */
/* background-size: 100%; */
/* overflow:auto; */
/* padding-bottom:20px; */
/* /\* border: 1px solid transparent; *\/ */
/* } */
.box{
width: 450px;
background: rgba(0, 0, 0, 0.8);
padding: 100px;
text-align: center;
margin: auto;
margin-top: 5%;
color: white;
font-family: 'Century Gothic',sans-serif;
font-size:18px;
overflow:auto;
height:100%;
}
.box-img{
border-radius: 50%;
width: 200px;
height: 200px;
}
.box h1{
font-family: 'Century Gothic',sans-serif;
font-size: 80px;
letter-spacing: 4px;
font-weight: 100;
}
.box h5{
font-family: 'Century Gothic',sans-serif;
font-size: 18px;
letter-spacing: 3px;
font-weight: 100;
text-align: center;
}
.box p{
text-align: justify;
font-size: 18px;
font-family: 'Century Gothic',sans-serif;
font-size: 16px;
font-style:italic;
letter-spacing: 3px;
font-weight: 100;
text-align: center;
}
ul{
margin: 0;
padding: 0;
}
.box li{
display: inline-block;
margin: 6px;
list-style: none;
}
.box li a{
color: white;
text-decoration: none;
font-size: 60px;
transition: all ease-in-out 250ms;
}
.box li a:hover{
color: #8b8b8b;
}
.clearfix::after{
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Основные пункты : Итак, мой сайт выглядит так: элемент box, содержащий img-box и отображающий заголовки и абзацы. Моя фотография отображается в img-box. Тело имеет фон, который установлен в mystyle.css. Первоначально у меня был фон, заданный как тело.
Проблемы : При включенном или выключенном фоне (в текущем коде css я его закомментировал) у меня все еще есть белый фон. Я хочу, чтобы вся коробка соответствовала рамке браузера как в мобильной, так и в настольной версии. Другими словами, скажем, я открываю веб-страницу в мобильном телефоне, она должна автоматически изменить размер, и я должен увидеть поле, хорошо подогнанное без какого-либо увеличения вручную.
Попытка решения : Я попытался добавить мета-имя области просмотра, как было предложено, чтобы сделать веб-сайт удобным для мобильных устройств и удалить пустое пространство под ним. Тем не менее, проблема все еще существует. Это ясно видно, если вы поставите темный фон для тела и коробки.
Пожалуйста, дайте мне знать, как этого добиться.