#html #css #twitter-bootstrap
Вопрос:
У меня большая часть кода упакована в контейнер со следующим стилем:
.container {
position: relative;
width: 100%;
height: 100vh;
overflow: auto;
padding-left: 0;
padding-right: 0;
scroll-behavior: smooth;
scroll-snap-type: y mandatory;
}
Это делается для того, чтобы я мог плавно переходить от одного раздела страницы, занимающего высоту 100 вч, к другому. (Вот почему у меня есть переполнение: авто в моем стиле). Однако, когда я добавляю «переполнение: авто», веб-страница перестает быть во всю ширину моего окна (как показано на рисунке).
Когда я удаляю «переполнение: авто» и заменяю его «переполнение: нет», ширина фиксируется, но моя функция прокрутки теперь больше работает.
HTML-код здесь:
<body class="container-fluid">
<!-- Main Page -->
<div class="container">
<div class="section">
<div class="main row vertical-center">
<div class="main-image col-md-6">
<img src="rec/img/placeholder-image.png" alt="client_image">
</div>
<div class="main-text align-items-center col-md-6">
<h2 class="p-3">
Name Lastname
</h2>
<span class="align-bottom bottom-text-main">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem corporis nostrum illo? Vero necessitatibus accusamus ullam commodi, consequatur corrupti. Recusandae eligendi eaque possimus minima numquam dignissimos cumque adipisci tempora temporibus.
</span>
</div>
<span id="contact">
<!-- <ul class="contact-icons" style="list-style-type:none;">
<li></li><a href="https:/www.facebook.com" class="fa fa-facebook" target="blank"></a></li>
<li><a href="https://www.instagram.com" class="fa fa-instagram" target="blank"></a></li>
<li><a href="mailto:example@gmail.com" class="fas fa-envelope" target="blank"></a></li>
</ul> -->
<i><a href="https:/www.facebook.com" class="fa fa-facebook" target="blank"></a></i>
<i><a href="https://www.instagram.com" class="fa fa-instagram" target="blank"></a></i>
<i><a href="mailto:example@gmail.com" class="fa fa-envelope" target="blank"></a></i>
</span>
</div>
</div>
<!-- Information -->
<div class="section info">
<div class="information p-4 pb-0" id="information">
<h1 >More about me.</h1>
<br>
<div class="background ml-3">
<h5 class = "pb-1">Background</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti facilis, est distinctio esse temporibus sint animi sunt veniam asperiores commodi quo numquam excepturi nemo ab, harum, nam possimus quas veritatis!</p>
</div>
<div class="skills ml-3">
<h5 class="pb-1">Skills</h5>
<ul>
<li>Skill</li>
<li>Skill</li>
<li>Skill</li>
<li>Skill</li>
<li>Skill</li>
</ul>
</div>
</div>
</div>
<!-- Experience -->
<div class="section">
<div class="experience p-3" id="experience">
<h1 class="pt-3">Work experience</h1>
<br>
<div class="xp">
<div class="workxp p-3 ml-3">
<h4 class = "pb-2">Lorem, ipsum.</h4>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laborum, aliquid. Quidem, quae dolorem! Amet ea obcaecati nam quia aliquid, facilis dolorem ab velit optio. Accusamus quidem commodi rerum itaque incidunt?
</div>
<div class="workxp p-3 ml-3">
<h4 class = "pb-2">Lorem, ipsum.</h4>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus aperiam veritatis eos illo quo necessitatibus omnis illum iure impedit debitis, consectetur voluptatum quisquam, quae temporibus veniam. In minima quos perferendis.
</div>
<div class="workxp p-3 ml-3">
<h4 class = "pb-2">Lorem, ipsum.</h4>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo officiis alias architecto non iure, quia labore rem. Totam nulla qui exercitationem beatae, ab aperiam! Asperiores soluta nisi repudiandae odit doloribus.
</div>
</div>
</div>
</div>
<!-- Additional Inforation -->
<div class="section">
<div class="additional-info p-3" id="additional-info">
<h1>Additional Information</h1>
<!-- <h1 class="second-line-info">Information</h1> -->
<div class="additional-info-text text-left">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, pariatur!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium, pariatur at. Fuga error impedit officiis!</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolor facilis tempora odit vel cum adipisci, aut ducimus illum ab tenetur quae temporibus non. Velit rerum ipsa quis, sint blanditiis doloremque repellendus aliquid eius amet exercitationem!</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem, ipsum dolor.</p>
</div>
</div>
</div>
<!-- Footer -->
<div class="section" id="footer">
<footer class="page-footer font-small blue pt-4">
<div class="container-fluid text-center text-md-left">
<div class="row">
<div class="col-md-6 mt-md-0 mt-3">
<h5 class="text-uppercase">Name Lastname</h5>
<p>Cliche Inspiritional Quote Here</p>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none pb-3">
<!-- Grid column -->
<div class="col-md-6 mb-md-0 mb-9">
<!-- Links -->
<h5 class="text-uppercase">Contact Links</h5>
<ul class="list-unstyled">
<li>
<i><a href="https:/www.facebook.com" class="fa fa-facebook" target="blank"></a> <a href="https:/www.facebook.com" target="blank">Facebook</a></i>
</li>
<li>
<i><a href="https://www.instagram.com" class="fa fa-instagram" target="blank"></a> <a href="https:/www.intagram.com" target="blank">Instagram</a></i>
</li>
<li>
<i><a href="mailto:example@gmail.com" class="fa fa-envelope" target="blank"></a> <a href="mailto:example@gmai;.com" target="blank">Email</a></i>
</li>
</ul>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
</footer>
</div>
</div>
Вот файл CSS:
body {
color: var(--grey);
width: 100%;
padding: 0;
margin: 0;
min-width: fit-content;
}
.container {
position: relative;
width: 100vh;
height: 100vh;
overflow: visible;
padding-left: 0;
padding-right: 0;
scroll-behavior: smooth;
scroll-snap-type: y mandatory;
}
.container .section {
position: relative;
height: 100%;
width: 100%;
scroll-snap-align: start;
/* background-blend-mode: multiply; */
}
/* .container.section:nth-child(1) {
background: ;
background-size: cover;
background-attachment: fixed;
} */
.main {
background-color: var(--white);
padding-left: 0%;
padding-right: 0%;
margin-top: 0rem;
margin-bottom: 0rem;
height: 100vh;
}
.main-image {
padding-top: 0%;
margin-left: 0%;
padding-right: 0;
margin-bottom: 2rem;
height: 50%;
}
.main-image img {
height: 100%;
width: 100%;
margin-left: 0%;
margin-right: 0%;
}
.main-text {
padding-bottom: 2rem;
height: 50%;
/* margin-left: 5%;
margin-right: 5%; */
}
.main-text p {
vertical-align: middle;
}
.information {
background-color: var(--soft);
height: 100vh;
padding-top: 0;
}
.experience {
background-color: var(--white);
height: 100%;
}
.information h1 {
padding-top: 1rem;
}
.background {
padding-top: 3rem;
}
.skills ul {
list-style-type: none;
}
.skills {
padding-top: 3rem;
}
.additional-info {
background-color: var(--soft);
height: 100vh;
padding-top: 1rem;
}
.additional-info h1 {
color: var(--grey);
}
.second-line-info {
margin-left: 5rem;
}
.additional-info-text {
text-align: center;
padding-left: 2rem;
padding-right: 2rem;
}
.additional-info-text p {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
#footer {
height: 10vh;
}
.list-unstyled i {
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
@media only screen and (min-width: 600px) {
html {
width: 100%;
}
body {
width: 100%;
padding: 0;
}
.main {
padding-top: 0%;
width: 100%;
}
.vertical-center {
display: flex;
align-items: center;
}
.main-image {
height: 100%;
margin-top: 15%;
}
.main-image img {
border-radius: 50%;
height: 50%;
width: 75%;
}
.main-text {
height: 100%;
margin-top: 20%;
}
.main-text h2 {
margin-bottom: 3rem;
}
#contact {
position: absolute;
bottom: 2%;
right: 2%;
}
.contact-icons {
padding: 0;
font-size: 2em;
display: table-cell;
}
.fa {
padding-left: 1rem;
padding-right: 1rem;
text-align: center;
text-decoration: none;
border-radius: 50%;
}
.contact a {
display: inline-block;
width: 1.2em;
transition: all .2s ease-in-out;
}
a:hover {
text-decoration: none;
}
.additional-info {
text-align: left;
justify-content: left;
}
.additional-info-text p {
margin-top: 2rem;
}
/* BEVAN ONDER */
/* General */
body, html
{
width: 100%;
padding: 0;
margin:0;
}
.container{
width: 100%;
}
.container.section{
width: 100%;
}
/* Information page(s) */
.background{
padding-top: 2rem;
}
.skills{
padding-top: 2rem;
}
.background p{
width: 50%;
}
}
Есть ли возможное решение для этого?
Комментарии:
1. Предоставленного вами кода недостаточно для отладки вашей проблемы.
2. Привет, я отредактировал вопрос, чтобы добавить больше кода @Kunal Tanwar
3. просто уберите
body { min-width: fit-content; }.4. @KunalTanwar Спасибо за предложение! К сожалению, кажется, что это не имеет никакого эффекта — пока я сохраняю oveflow: auto; — ширина является проблемой. Если я удалю, замените это на overflow: hidden;, тогда ширина не проблема, но плавная прокрутка не работает. Так что, похоже, на данный момент я могу выбрать только одно: эффект прокрутки или правильную ширину.
5. предоставленный вами код отлично работает в моем браузере.
Ответ №1:
Используйте это значение css
overflow:scroll
или
overflow:visible
Сохранение их в автоматическом режиме позволит браузеру решить проблему переполнения.
Лично я никогда не использую автоматическое значение.
Комментарии:
1. Привет, спасибо за ваш комментарий! переполнение:видимый решил проблему ширины, но удалил желаемый эффект прокрутки. Я обновил вопрос, включив в него также свой HTML-и CSS-код
Ответ №2:
попробуйте это
overflow:scroll;
width:100vw
если не получилось, пожалуйста, отредактируйте сообщение и добавьте html
Комментарии:
1. Спасибо вам за предложение. К сожалению, это не возымело никакого эффекта. Я обновил вопрос, включив в него свой HTML-код и CSS-код