Вся веб-страница уничтожается горизонтальной полосой прокрутки .... ничего не может сделать, кроме как ждать
Я разрабатываю веб-страницу, но на странице присутствует горизонтальная полоса прокрутки. Я хочу удалить его, но не могу. Недавно я занялся веб-разработкой, и большинство веб-страниц, которые я делал для практики, столкнулись с одной и той же проблемой.
Я ожидаю, что следующая часть кода будет ошибочной
.heading::before{border: 2px solid chocolate;
content: "";
height: 100vh;
background: url(....) no-repeat center ;
width: 100vw;
position: absolute;
top: 0px;
left: 0px;
z-index: -1; }
*{
margin: 0px;
padding: 0px;
}
nav{
position: sticky;
top: 0px;
left:0px;
margin: 0px 0px 10px 0px;
padding: 5px 5px;
background-color: #15191f;
}
.heading{
height: 90vh;
}
.heading::before{
border: 2px solid chocolate;
content: "";
height: 100vh;
background: url() no-repeat center ;
width: 100vw;
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
}
.flex{
display: flex;
}
.flex-row{
flex-direction: row;
}
.flex-column{
flex-direction: column;
}
.wrap{
flex-wrap: wrap;
}
.al-cen{
align-items: center;
}
.ju-cen{
justify-content: center;
}
nav a{
text-decoration: none;
background-color: #15191f;
color: #e3ecf3;
padding: 4px 10px;
border: 2px;
border-radius: 10px;
}
nav a:hover{
color: #15191f;
background-color: #e3ecf3;
}
#li1{
margin-left: 50px;
}
#a1{
margin: 0px 4px;
}
#a2{
margin: 0px 4px;
}
#a3{
margin: 0px 4px;
}
#a4{
margin: 0px 4px;
}
nav ul li{
list-style: none;
}
#logo{
width: 5vw;
border: 2px ;
border-radius:100mm;
}
/* -------------------------------------------------------------------- */
div ul{
margin: 0px 40px;
}
body{
font-family:Verdana, Geneva, Tahoma, sans-serif;
font-size: 1.5vw;
background-color: #e3ecf3;
}
div{
margin: 20px 15px;
}
ol li{
margin: 0px 40px;
}
.block{
display:block;
}
.inline-block{
display: inline-block;
}
.border-red{
border: 3.5px solid red;
border-radius: 12px;
}
.border-green{
border: 3.5px solid green;
border-radius: 5px;
}
.border-blue{
border: 3.5px solid blue;
border-radius: 5px;
}
.line-height{
line-height: 8vh;
}
ol{
border: 2px solid blue;
border-radius: 5px;
text-align: center;
/* display: inline-block; */
margin: 4px 0px;
width:300px
}
.text-cen{
text-align: center;
}
ol li{
margin-left: 40px;
}
input{
display: block;
}
option{
background-color:#15191f;
color:#e3ecf3;
height: 50px;
font-size: 1.1rem;
border-radius: 5px;
}
select{
width: 85px;
background-color:#15191f;
color:#e3ecf3;
height:30px;
border: 2px solid #15191f;
border-radius: 6px;
}
.button{
height: 25px;
width: 25px;
/* border: 2px solid #15191f; */
border-radius: 100px;
/* background-color: #15191f; */
}
/* .button: */
.checkbox{
/* background-color: #15191f; */
height: 25px;
width: 25px;
}<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>All in One</title>
<link rel = "stylesheet" href = "../CSS/home.css">
<script src = "../JS/home.js"></script>
</head>
<body class = "">
<nav class = "flex row al-cen">
<img id = "logo" src = "../random_source" alt = "Error loading image">
<ul class = "flex row">
<li id = "li1"><a id = "a1" href = "../HTML/home.html" target = "_blank">Home</a></li>
<li id = "li2"><a id = "a2" href = "../HTML/about.html" target = "_blank">About Us</a></li>
<li id = "li3"><a id = "a3" href = "../HTML/services.html" target = "_blank">Our Services</a></li>
<li id = "li4"><a id = "a4" href = "../HTML/contact.html" target = "_blank">Contact Us</a></li>
</ul>
</nav>
<div class = "heading flex flex-column al-cen ju-cen">
<h1 class = "line-height">All in ONE Website</h1>
<p>This <strong>Website</strong> aims to <i>include</i> all that has been <em>learnt</em> and keep a record of
it for future usage.</p>
</div>
<hr>
<div class = "border-red firstpara">
<p><b>
<\b>This Bold<\b>
</b>Lorem ipsum dolor sit amet consectetur, adipisicing elit. <br><strong>
<\br> Has been used here and here<\br><br>
</strong> modi molestias omnis voluptate alias unde voluptates provident hic voluptatibus ipsum deleniti
itaque
delectus et expedita quisquam, non soluta, harum consequuntur sapiente rem quaerat. Repellendus, impedit.
</p>
</div>
<div class = "border-green lists">
<div class = "orderdlist block border flex-row ">
<ol id = "ol1" class = "inline-block" type = "1">
<h6>OL type 1</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id = "olA" class = "inline-block" type = "A">
<h6>OL type A</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id = "ola" class = "inline-block" type = "a">
<h6>OL type a</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id = "olI" class = "inline-block" type = "I">
<h6>OL type I</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id = "oli" class = "inline-block" type = "i">
<h6>OL type i</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
</div>
<div class = "unorderedlist">
<ul type = "square">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
<ul type = "circle">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
<ul type = "disc">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
</div>
</div>
<div class = "border-blue table text-cen flex flex-column wrap">
<h3>This is a Table</h3>
<table>
<thead>
<tr>
<th>Heading-1</th>
<th>Heading-2</th>
<th>Heading-3</th>
<th>Heading-4</th>
<th>Heading-5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row-1-Colum-1</td>
<td>Row-1-Colum-2</td>
<td>Row-1-Colum-3</td>
<td>Row-1-Colum-4</td>
<td>Row-1-Colum-5</td>
</tr>
<tr>
<td>Row-2-Column-1</td>
<td>Row-2-Column-2</td>
<td>Row-2-Column-3</td>
<td>Row-2-Column-4</td>
<td>Row-2-Column-5</td>
</tr>
<tr>
<td>Row-3-Column-1</td>
<td>Row-3-Column-2</td>
<td>Row-3-Column-3</td>
<td>Row-3-Column-4</td>
<td>Row-3-Column-5</td>
</tr>
</tbody>
</table>
</div>
<div class = "border-red forms flex flex-column">
<h1 class = "text-cen">FORMS</h1>
<h5>Below are some types of input we can ask on forms.Include a NAME in input tags
</h5>
<p>We will make input tag a block element to make go to next line and make the code look clean.
Before it was inline so elements crammmed over each other.We can add value = "" to show that thing.<br>
The diff between value and placeholder is that the placeholder gets removed whan an item is entered, wheras
when we enter an item at place of value, it concencates in the value. Placeholder is Background, value is
not.
@gmail.com is value below in email. Remaining are Placeholder
</p>
<form action = "#">
Button <input class = "button" type = "button" placeholder = "Placeholder">
Checkbox<input type = "checkbox" class = "checkbox" placeholder = "Placeholder">
Color<input type = "color" placeholder = "Placeholder">
Date<input type = "date" placeholder = "Placeholder">
Datetime<input type = "datetime" placeholder = "Placeholder">
Datetime-local<input type = "datetime-local" placeholder = "Placeholder"><p>Just Testing</p>
Email<input type = "email" value = "@gmail.com" placeholder = "Placeholder">
File<input type = "file" placeholder = "Placeholder">
Hidden<input type = "hidden" placeholder = "Placeholder">
Image<input type = "image" placeholder = "Placeholder">
Month<input type = "month" placeholder = "Placeholder">
Number<input type = "number" placeholder = "Placeholder">
Password<input type = "password" placeholder = "Placeholder">
Radio<input type = "radio" placeholder = "Placeholder">
Range<input type = "range" placeholder = "Placeholder">
Reset<input type = "reset" placeholder = "Placeholder">
Search<input type = "search" placeholder = "Placeholder">
Submit<input type = "submit" placeholder = "Placeholder">
Tel<input type = "tel" placeholder = "Placeholder">
Text<input type = "text" placeholder = "Placeholder">
Time<input type = "time" placeholder = "Placeholder">
Url<input type = "url" placeholder = "Placeholder">
Week<input type = "week" placeholder = "Placeholder">
Select from a dropdown <select>
<option value = "Option-1-Val">Option-1</option>
<option value = "Option-2-Val">Option-2</option>
<option value = "Option-3-Val">Option-3</option>
<option value = "Option-4-Val">Option-4</option>
<option value = "Option-5-Val">Option-5</option>
</select>
</form>
</div>
<div class = "entities border-green">
<h4>We use entities for displaying some character</h4>
<
<!-- Less Than -->
>
<!-- Greater Than -->
£
<!-- pound -->
©
<!-- copy -->
⇛
<!-- Arrow -->
½
<!-- In form of fraction -->
</div>
<div class = "border-blue semanticelements">
<p>A dropdown button which shows whatever is written in summary and when clicked reveals what is written in detail tag.</p>
<details>
<summary>I have keys but no doors. I have space but no room. You can enter but you can't leave. What am i?</summary>
A Keyboard.
</details>
<p>Now i will use a time tag</p>
<p>We will be celebrating new year on <time datetime = "2022-12-12">December 12</time> in my house.</p>
</div>
</body>
</html>В частности width: 100vw, если я удалю эту строку, полоса прокрутки исчезнет, но исчезнет и изображение.
width:auto также заставляет изображение исчезать.
- Я хочу отобразить фоновое изображение, используя этот код (адрес изображения в URL-адресе). Если я удалю этот код, горизонтальная полоса прокрутки исчезнет. Использование границы показывает, что это действительно проблема. Как я могу скрыть полосу прокрутки при отображении изображения на весь экран, независимо от размера. (Я имею в виду, что ни одна часть экрана не должна быть упущена.) Большинство ответов предлагают удалить ширину 100vw и 100%, но это удаляет изображение.
Если возможно, предложите другие способы, которые позволят мне отображать изображение на весь экран, не вызывая эстетических проблем. Изображение должно быть в фоновом режиме и только для определенного тега, а не для всей веб-страницы.
Граница добавляет дополнительную ширину, как вы заметили. Вы пытались установить box-sizing: border-box?
—
23.03.2022 09:13
@ZachJensz Готовый фрагмент
—
23.03.2022 09:14
@AHaworth В качестве быстрой проверки того, что вы упомянули, я написал *{box-sizing:borderbox} в css. Это ничего не меняет
—
23.03.2022 09:17
Что случилось с дефисом?
—
23.03.2022 09:17
Я удалил ссылку на изображение из кода, но проблема все еще сохраняется. Может быть ясно по показанной границе.
—
23.03.2022 09:17
@AHaworth Все еще ничего. *{поле: 0px; отступ: 0px; box-sizing: граница-коробка; }
—
23.03.2022 09:19
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
7
43
3
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 3
Вам нужно установить box-sizing специально для псевдоэлементов.
*, *::before, *::after{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
nav{
position: sticky;
top: 0px;
left:0px;
margin: 0px 0px 10px 0px;
padding: 5px 5px;
background-color: #15191f;
}
.heading{
height: 90vh;
}
.heading::before{
border: 2px solid chocolate;
content: "";
height: 100vh;
background: url() no-repeat center ;
width: 100vw;
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
}
.flex{
display: flex;
}
.flex-row{
flex-direction: row;
}
.flex-column{
flex-direction: column;
}
.wrap{
flex-wrap: wrap;
}
.al-cen{
align-items: center;
}
.ju-cen{
justify-content: center;
}
nav a{
text-decoration: none;
background-color: #15191f;
color: #e3ecf3;
padding: 4px 10px;
border: 2px;
border-radius: 10px;
}
nav a:hover{
color: #15191f;
background-color: #e3ecf3;
}
#li1{
margin-left: 50px;
}
#a1{
margin: 0px 4px;
}
#a2{
margin: 0px 4px;
}
#a3{
margin: 0px 4px;
}
#a4{
margin: 0px 4px;
}
nav ul li{
list-style: none;
}
#logo{
width: 5vw;
border: 2px ;
border-radius:100mm;
}
/* -------------------------------------------------------------------- */
div ul{
margin: 0px 40px;
}
body{
font-family:Verdana, Geneva, Tahoma, sans-serif;
font-size: 1.5vw;
background-color: #e3ecf3;
}
div{
margin: 20px 15px;
}
ol li{
margin: 0px 40px;
}
.block{
display:block;
}
.inline-block{
display: inline-block;
}
.border-red{
border: 3.5px solid red;
border-radius: 12px;
}
.border-green{
border: 3.5px solid green;
border-radius: 5px;
}
.border-blue{
border: 3.5px solid blue;
border-radius: 5px;
}
.line-height{
line-height: 8vh;
}
ol{
border: 2px solid blue;
border-radius: 5px;
text-align: center;
/* display: inline-block; */
margin: 4px 0px;
width:300px
}
.text-cen{
text-align: center;
}
ol li{
margin-left: 40px;
}
input{
display: block;
}
option{
background-color:#15191f;
color:#e3ecf3;
height: 50px;
font-size: 1.1rem;
border-radius: 5px;
}
select{
width: 85px;
background-color:#15191f;
color:#e3ecf3;
height:30px;
border: 2px solid #15191f;
border-radius: 6px;
}
.button{
height: 25px;
width: 25px;
/* border: 2px solid #15191f; */
border-radius: 100px;
/* background-color: #15191f; */
}
/* .button: */
.checkbox{
/* background-color: #15191f; */
height: 25px;
width: 25px;
}<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>All in One</title>
<link rel = "stylesheet" href = "../CSS/home.css">
<script src = "../JS/home.js"></script>
</head>
<body class = "">
<nav class = "flex row al-cen">
<img id = "logo" src = "../random_source" alt = "Error loading image">
<ul class = "flex row">
<li id = "li1"><a id = "a1" href = "../HTML/home.html" target = "_blank">Home</a></li>
<li id = "li2"><a id = "a2" href = "../HTML/about.html" target = "_blank">About Us</a></li>
<li id = "li3"><a id = "a3" href = "../HTML/services.html" target = "_blank">Our Services</a></li>
<li id = "li4"><a id = "a4" href = "../HTML/contact.html" target = "_blank">Contact Us</a></li>
</ul>
</nav>
<div class = "heading flex flex-column al-cen ju-cen">
<h1 class = "line-height">All in ONE Website</h1>
<p>This <strong>Website</strong> aims to <i>include</i> all that has been <em>learnt</em> and keep a record of
it for future usage.</p>
</div>
<hr>
<div class = "border-red firstpara">
<p><b>
<\b>This Bold<\b>
</b>Lorem ipsum dolor sit amet consectetur, adipisicing elit. <br><strong>
<\br> Has been used here and here<\br><br>
</strong> modi molestias omnis voluptate alias unde voluptates provident hic voluptatibus ipsum deleniti
itaque
delectus et expedita quisquam, non soluta, harum consequuntur sapiente rem quaerat. Repellendus, impedit.
</p>
</div>
<div class = "border-green lists">
<div class = "orderdlist block border flex-row ">
<ol id = "ol1" class = "inline-block" type = "1">
<h6>OL type 1</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id = "olA" class = "inline-block" type = "A">
<h6>OL type A</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id = "ola" class = "inline-block" type = "a">
<h6>OL type a</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id = "olI" class = "inline-block" type = "I">
<h6>OL type I</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id = "oli" class = "inline-block" type = "i">
<h6>OL type i</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
</div>
<div class = "unorderedlist">
<ul type = "square">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
<ul type = "circle">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
<ul type = "disc">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
</div>
</div>
<div class = "border-blue table text-cen flex flex-column wrap">
<h3>This is a Table</h3>
<table>
<thead>
<tr>
<th>Heading-1</th>
<th>Heading-2</th>
<th>Heading-3</th>
<th>Heading-4</th>
<th>Heading-5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row-1-Colum-1</td>
<td>Row-1-Colum-2</td>
<td>Row-1-Colum-3</td>
<td>Row-1-Colum-4</td>
<td>Row-1-Colum-5</td>
</tr>
<tr>
<td>Row-2-Column-1</td>
<td>Row-2-Column-2</td>
<td>Row-2-Column-3</td>
<td>Row-2-Column-4</td>
<td>Row-2-Column-5</td>
</tr>
<tr>
<td>Row-3-Column-1</td>
<td>Row-3-Column-2</td>
<td>Row-3-Column-3</td>
<td>Row-3-Column-4</td>
<td>Row-3-Column-5</td>
</tr>
</tbody>
</table>
</div>
<div class = "border-red forms flex flex-column">
<h1 class = "text-cen">FORMS</h1>
<h5>Below are some types of input we can ask on forms.Include a NAME in input tags
</h5>
<p>We will make input tag a block element to make go to next line and make the code look clean.
Before it was inline so elements crammmed over each other.We can add value = "" to show that thing.<br>
The diff between value and placeholder is that the placeholder gets removed whan an item is entered, wheras
when we enter an item at place of value, it concencates in the value. Placeholder is Background, value is
not.
@gmail.com is value below in email. Remaining are Placeholder
</p>
<form action = "#">
Button <input class = "button" type = "button" placeholder = "Placeholder">
Checkbox<input type = "checkbox" class = "checkbox" placeholder = "Placeholder">
Color<input type = "color" placeholder = "Placeholder">
Date<input type = "date" placeholder = "Placeholder">
Datetime<input type = "datetime" placeholder = "Placeholder">
Datetime-local<input type = "datetime-local" placeholder = "Placeholder"><p>Just Testing</p>
Email<input type = "email" value = "@gmail.com" placeholder = "Placeholder">
File<input type = "file" placeholder = "Placeholder">
Hidden<input type = "hidden" placeholder = "Placeholder">
Image<input type = "image" placeholder = "Placeholder">
Month<input type = "month" placeholder = "Placeholder">
Number<input type = "number" placeholder = "Placeholder">
Password<input type = "password" placeholder = "Placeholder">
Radio<input type = "radio" placeholder = "Placeholder">
Range<input type = "range" placeholder = "Placeholder">
Reset<input type = "reset" placeholder = "Placeholder">
Search<input type = "search" placeholder = "Placeholder">
Submit<input type = "submit" placeholder = "Placeholder">
Tel<input type = "tel" placeholder = "Placeholder">
Text<input type = "text" placeholder = "Placeholder">
Time<input type = "time" placeholder = "Placeholder">
Url<input type = "url" placeholder = "Placeholder">
Week<input type = "week" placeholder = "Placeholder">
Select from a dropdown <select>
<option value = "Option-1-Val">Option-1</option>
<option value = "Option-2-Val">Option-2</option>
<option value = "Option-3-Val">Option-3</option>
<option value = "Option-4-Val">Option-4</option>
<option value = "Option-5-Val">Option-5</option>
</select>
</form>
</div>
<div class = "entities border-green">
<h4>We use entities for displaying some character</h4>
<
<!-- Less Than -->
>
<!-- Greater Than -->
£
<!-- pound -->
©
<!-- copy -->
⇛
<!-- Arrow -->
½
<!-- In form of fraction -->
</div>
<div class = "border-blue semanticelements">
<p>A dropdown button which shows whatever is written in summary and when clicked reveals what is written in detail tag.</p>
<details>
<summary>I have keys but no doors. I have space but no room. You can enter but you can't leave. What am i?</summary>
A Keyboard.
</details>
<p>Now i will use a time tag</p>
<p>We will be celebrating new year on <time datetime = "2022-12-12">December 12</time> in my house.</p>
</div>
</body>
</html>у меня боковая прокрутка
—
23.03.2022 09:26
Какой у вас браузер и ОС? В данный момент я ограничен iPad, использую Safari и вижу полную красную рамку, а боковая (горизонтальная) прокрутка отсутствует. Я предполагаю, что вы находитесь на чем-то, что показывает вертикальную полосу прокрутки и занимает часть ширины.
—
23.03.2022 09:30
Горизонтальная полоса прокрутки осталась.
—
23.03.2022 09:30
На пк вин 10 браузер опера
—
23.03.2022 09:30
Вам нужно учесть ширину вертикальной полосы прокрутки.
—
23.03.2022 09:32
Да, это, вероятно, полоса прокрутки. Я использую Firefox Linux Desktop
—
23.03.2022 09:34
Рад узнать, что он не отображается в Safari.
—
23.03.2022 09:44
Ответ принят как подходящий
К псевдоэлементу я добавил box-sizing: border-box и изменил ширину на 100% вместо 100vw.
box-sizing: border-box
Это изменяет поле, используемое при объявлении абсолютной ширины. Когда мы устанавливаем для него значение border-box, это означает, что граница размещается внутри объявленной ширины, а не добавляется к ней. у меня есть поле шириной 100 пикселей с границей 2 пикселя, я хочу, чтобы граница была включена в эти 100 пикселей, а не добавлялась к ней.
width: 100%
Ширина в процентах относится к ширине контейнера, тогда как область просмотра относится к области просмотра. 100% означает, что я занимаю всю ширину контейнера, в котором я нахожусь, 100vw означает, что он занимает всю ширину области просмотра (включая полосу прокрутки).
* {
margin: 0px;
padding: 0px;
}
nav {
position: sticky;
top: 0px;
left: 0px;
margin: 0px 0px 10px 0px;
padding: 5px 5px;
background-color: #15191f;
}
.heading {
height: 90vh;
}
.heading::before {
box-sizing: border-box;
border: 2px solid chocolate;
content: "";
height: 100vh;
background: url() no-repeat center;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
}
.flex {
display: flex;
}
.flex-row {
flex-direction: row;
}
.flex-column {
flex-direction: column;
}
.wrap {
flex-wrap: wrap;
}
.al-cen {
align-items: center;
}
.ju-cen {
justify-content: center;
}
nav a {
text-decoration: none;
background-color: #15191f;
color: #e3ecf3;
padding: 4px 10px;
border: 2px;
border-radius: 10px;
}
nav a:hover {
color: #15191f;
background-color: #e3ecf3;
}
#li1 {
margin-left: 50px;
}
#a1 {
margin: 0px 4px;
}
#a2 {
margin: 0px 4px;
}
#a3 {
margin: 0px 4px;
}
#a4 {
margin: 0px 4px;
}
nav ul li {
list-style: none;
}
#logo {
width: 5vw;
border: 2px;
border-radius: 100mm;
}
/* -------------------------------------------------------------------- */
div ul {
margin: 0px 40px;
}
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 1.5vw;
background-color: #e3ecf3;
}
div {
margin: 20px 15px;
}
ol li {
margin: 0px 40px;
}
.block {
display: block;
}
.inline-block {
display: inline-block;
}
.border-red {
border: 3.5px solid red;
border-radius: 12px;
}
.border-green {
border: 3.5px solid green;
border-radius: 5px;
}
.border-blue {
border: 3.5px solid blue;
border-radius: 5px;
}
.line-height {
line-height: 8vh;
}
ol {
border: 2px solid blue;
border-radius: 5px;
text-align: center;
/* display: inline-block; */
margin: 4px 0px;
width: 300px
}
.text-cen {
text-align: center;
}
ol li {
margin-left: 40px;
}
input {
display: block;
}
option {
background-color: #15191f;
color: #e3ecf3;
height: 50px;
font-size: 1.1rem;
border-radius: 5px;
}
select {
width: 85px;
background-color: #15191f;
color: #e3ecf3;
height: 30px;
border: 2px solid #15191f;
border-radius: 6px;
}
.button {
height: 25px;
width: 25px;
/* border: 2px solid #15191f; */
border-radius: 100px;
/* background-color: #15191f; */
}
/* .button: */
.checkbox {
/* background-color: #15191f; */
height: 25px;
width: 25px;
}<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>All in One</title>
<link rel = "stylesheet" href = "../CSS/home.css">
<script src = "../JS/home.js"></script>
</head>
<body class = "">
<nav class = "flex row al-cen">
<img id = "logo" src = "../random_source" alt = "Error loading image">
<ul class = "flex row">
<li id = "li1"><a id = "a1" href = "../HTML/home.html" target = "_blank">Home</a></li>
<li id = "li2"><a id = "a2" href = "../HTML/about.html" target = "_blank">About Us</a></li>
<li id = "li3"><a id = "a3" href = "../HTML/services.html" target = "_blank">Our Services</a></li>
<li id = "li4"><a id = "a4" href = "../HTML/contact.html" target = "_blank">Contact Us</a></li>
</ul>
</nav>
<div class = "heading flex flex-column al-cen ju-cen">
<h1 class = "line-height">All in ONE Website</h1>
<p>This <strong>Website</strong> aims to <i>include</i> all that has been <em>learnt</em> and keep a record of it for future usage.</p>
</div>
<hr>
<div class = "border-red firstpara">
<p><b>
<\b>This Bold<\b>
</b>Lorem ipsum dolor sit amet consectetur, adipisicing elit. <br><strong>
<\br> Has been used here and here<\br><br>
</strong> modi molestias omnis voluptate alias unde voluptates provident hic voluptatibus ipsum deleniti itaque delectus et expedita quisquam, non soluta, harum consequuntur sapiente rem quaerat. Repellendus, impedit.
</p>
</div>
<div class = "border-green lists">
<div class = "orderdlist block border flex-row ">
<ol id = "ol1" class = "inline-block" type = "1">
<h6>OL type 1</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id = "olA" class = "inline-block" type = "A">
<h6>OL type A</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id = "ola" class = "inline-block" type = "a">
<h6>OL type a</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id = "olI" class = "inline-block" type = "I">
<h6>OL type I</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id = "oli" class = "inline-block" type = "i">
<h6>OL type i</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
</div>
<div class = "unorderedlist">
<ul type = "square">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
<ul type = "circle">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
<ul type = "disc">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
</div>
</div>
<div class = "border-blue table text-cen flex flex-column wrap">
<h3>This is a Table</h3>
<table>
<thead>
<tr>
<th>Heading-1</th>
<th>Heading-2</th>
<th>Heading-3</th>
<th>Heading-4</th>
<th>Heading-5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row-1-Colum-1</td>
<td>Row-1-Colum-2</td>
<td>Row-1-Colum-3</td>
<td>Row-1-Colum-4</td>
<td>Row-1-Colum-5</td>
</tr>
<tr>
<td>Row-2-Column-1</td>
<td>Row-2-Column-2</td>
<td>Row-2-Column-3</td>
<td>Row-2-Column-4</td>
<td>Row-2-Column-5</td>
</tr>
<tr>
<td>Row-3-Column-1</td>
<td>Row-3-Column-2</td>
<td>Row-3-Column-3</td>
<td>Row-3-Column-4</td>
<td>Row-3-Column-5</td>
</tr>
</tbody>
</table>
</div>
<div class = "border-red forms flex flex-column">
<h1 class = "text-cen">FORMS</h1>
<h5>Below are some types of input we can ask on forms.Include a NAME in input tags
</h5>
<p>We will make input tag a block element to make go to next line and make the code look clean. Before it was inline so elements crammmed over each other.We can add value = "" to show that thing.<br> The diff between value and placeholder is that the placeholder
gets removed whan an item is entered, wheras when we enter an item at place of value, it concencates in the value. Placeholder is Background, value is not. @gmail.com is value below in email. Remaining are Placeholder
</p>
<form action = "#">
Button <input class = "button" type = "button" placeholder = "Placeholder"> Checkbox
<input type = "checkbox" class = "checkbox" placeholder = "Placeholder"> Color
<input type = "color" placeholder = "Placeholder"> Date
<input type = "date" placeholder = "Placeholder"> Datetime
<input type = "datetime" placeholder = "Placeholder"> Datetime-local
<input type = "datetime-local" placeholder = "Placeholder">
<p>Just Testing</p>
Email<input type = "email" value = "@gmail.com" placeholder = "Placeholder"> File
<input type = "file" placeholder = "Placeholder"> Hidden
<input type = "hidden" placeholder = "Placeholder"> Image
<input type = "image" placeholder = "Placeholder"> Month
<input type = "month" placeholder = "Placeholder"> Number
<input type = "number" placeholder = "Placeholder"> Password
<input type = "password" placeholder = "Placeholder"> Radio
<input type = "radio" placeholder = "Placeholder"> Range
<input type = "range" placeholder = "Placeholder"> Reset
<input type = "reset" placeholder = "Placeholder"> Search
<input type = "search" placeholder = "Placeholder"> Submit
<input type = "submit" placeholder = "Placeholder"> Tel
<input type = "tel" placeholder = "Placeholder"> Text
<input type = "text" placeholder = "Placeholder"> Time
<input type = "time" placeholder = "Placeholder"> Url
<input type = "url" placeholder = "Placeholder"> Week
<input type = "week" placeholder = "Placeholder"> Select from a dropdown
<select>
<option value = "Option-1-Val">Option-1</option>
<option value = "Option-2-Val">Option-2</option>
<option value = "Option-3-Val">Option-3</option>
<option value = "Option-4-Val">Option-4</option>
<option value = "Option-5-Val">Option-5</option>
</select>
</form>
</div>
<div class = "entities border-green">
<h4>We use entities for displaying some character</h4>
<
<!-- Less Than -->
>
<!-- Greater Than -->
£
<!-- pound -->
©
<!-- copy -->
⇛
<!-- Arrow -->
½
<!-- In form of fraction -->
</div>
<div class = "border-blue semanticelements">
<p>A dropdown button which shows whatever is written in summary and when clicked reveals what is written in detail tag.</p>
<details>
<summary>I have keys but no doors. I have space but no room. You can enter but you can't leave. What am i?</summary>
A Keyboard.
</details>
<p>Now i will use a time tag</p>
<p>We will be celebrating new year on <time datetime = "2022-12-12">December 12</time> in my house.</p>
</div>
</body>
</html>Это РАБОТАЕТ, но прежде чем я отмечу этот ответ как правильный, можете ли вы объяснить, почему это работает, а не 100vw.
—
23.03.2022 09:52
@BlaackWork Это работает, потому что ширина в процентах относится к ширине контейнера, тогда как область просмотра относится к области просмотра. 100% означает, что я занимаю всю ширину контейнера, в котором я нахожусь, 100vw означает, что он занимает всю ширину области просмотра (включая полосу прокрутки).
—
23.03.2022 09:59
Я обновил вопрос с дополнительным объяснением
—
23.03.2022 10:02
Любой другой способ сделать то же самое? Просто спрашиваю. Это здорово иметь резервную копию.
—
23.03.2022 10:27
@BlaackWork, ха-ха, спасибо. Вы разблокируете эту функцию в ближайшее время. Не думайте, что есть другой способ определить ширину относительно родителя, для этого вам должно хватить процентов.
—
23.03.2022 10:30
В основном теге вашего сайта вы должны указать ширину 100%:
width : 100%;
если вы установите 100vw, ваш браузер примет overflow-x, а также ширину вертикальной полосы прокрутки.
Это не решит проблему, так как граница по-прежнему будет вызывать переполнение элемента.
—
23.03.2022 10:04
Другие вопросы по теме
Как сделать область выбора области карты Angular svg?
Как показать заголовок GitBook?
Модальное окно Bootstrap не появляется при нажатии кнопки
Как добавить вертикальную линию в заголовок первого столбца в таблице данных?
Как уменьшить ширину панели навыков при каждом нажатии кнопки
Javascript работает в codepen, но не в браузере
Проверьте общий класс этого контейнера, затем установите условие
Capybara проверяет класс HTML и идентификатор
Почему размер моего отступа + шрифта не равен высоте моего контейнера?
Минимальная маржа при попутном ветре
Похожие вопросы
Как сделать область выбора области карты Angular svg?
Как показать заголовок GitBook?
Модальное окно Bootstrap не появляется при нажатии кнопки
Как добавить вертикальную линию в заголовок первого столбца в таблице данных?
Как уменьшить ширину панели навыков при каждом нажатии кнопки
Как ограничить тип файла загрузки html до *.xmind?
Как вызвать внешнюю функцию javascript в html с помощью onclick
Код JavaScript определяет IE 10 как поддерживаемую версию, а не как устаревшую
AJAX JSON HTML JS Как вывести таблицу данных?
Как создать amp-embed, который регулирует свою высоту в соответствии с содержимым?
Сделайте исполняемый фрагмент со всем вашим кодом