Разделение по всей ширине с использованием HTML5 и CSS3 (адаптивное)

StackOverflow https://stackoverflow.com//questions/25076798

  •  02-01-2020
  •  | 
  •  

Вопрос

Я относительно новичок в StackOverflow и испытываю некоторые трудности при создании веб-страницы.

Итак, мне нужен одностраничный веб-сайт, разделенный на разные разделы, которые представляют собой элементы div во всю ширину (т. е. 100% ширины экрана) и идут последовательно с разными цветами фона.

Проблема, с которой я столкнулся, заключается в том, что элементы div не занимают всю ширину экрана и имеют пустое пространство не только по бокам, но и между двумя элементами div.
Кроме того, когда размер окна уменьшается, разрыв между элементами div увеличивается.

Желаемый результат виден на следующих веб-сайтах:

http://classrebels.com/
http://startbootstrap.com/templates/freelancer/

Код, который я использую, выглядит следующим образом:

и) HTML:

    <html>
    <body>
    <div class="full" id="one">
    <h1>Just something</h1>
    </div>
    <div class="full" id="two">
    <h1>Just something</h1>
    </div>
    </body>
    </html>

ii) CSS:

    .full{
    width= 100%;
     }
    #one{
     background-color: #fff;
    }  
    #two{
     background-color: #f13;
    }

Пожалуйста, скажите мне, где я ошибаюсь

Это было полезно?

Решение

демонстрация

html 

<div class="full" id="one">
     <h1>Just something</h1>
</div>
<div class="full" id="two">
     <h1>Just something</h1>
</div>
.

CSS 

body, html {
    width: 100%;
    height: 100%;
    margin:0; /* default margin set to 0 */
    padding:0; /* default padding set to 0 */
}
.full {
    width: 100%;
}
#one {
    background-color: gray;
    height: 50%; /* whatever you want to give height */
}
#two {
    background-color: #f13;
    height: 50%; /* whatever you want to give height */
}
.full h1 {
    margin:0; /* default margin of h1 tag set to 0 */
    padding: 20px 10px 10px 20px; /* padding if you want to give spaces between borders and content of div */
}
.

Другие советы

Демо-скрипка

Чтобы удалить поля/отступы по умолчанию в области просмотра (которые дают вам пробелы), вам необходимо добавить следующий CSS:

html, body{
  width:100%; /* <-- also a good idea to add */
  margin:0;
  padding:0;
}

и измените:

.full{
  width= 100%;
}

к:

.full{
  width:100%;
}

Пары свойство/значение стиля CSS разделяются двоеточием. : и не равный =

Вы пробовали настроить маржу и прокладки 0 в полном объеме и в тегу тела тоже как 

 .full
{
    width :100%;
   margin:0px;
   padding:0px;
     }
.

Точно так же ваша заголовка также берет на себя немного поля, поэтому установить маржу по мере необходимости. Для лучшего, пожалуйста, проконсультируйтесь с этой ссылкой w3schools

Вы должны изменить корпус и поля H1, поскольку они имеют значения по умолчанию в браузере. Я исправил это для вас в этой скрипке: 

h1{
  margin: 0px;
}
body{
  border: 0px;
  padding: 0px;
  margin: 0px;
}
.

http://jsfiddle.net/pwlgb/

Проблема в том, что вы не даете целую девочку фонового цвета, а только текст.

Если вы объявите границу, вы можете увидеть реальный размер DIV, и он заполнит весь диван с цветом.

Проверьте скрипку, которую я сделал для этого 

 border: 1px solid black;
.

http://jsfiddle.net/2h4kq/

Вы можете установить границу на 0px, чтобы она не показана, и она даст вам правильный результат

Демо-версия, на которую вы ссылаетесь, не использует элементы div полной ширины.На самом деле они используют полную ширину <section> элемент, для которого установлен цвет фона.

Затем у них есть внутренний ряд <div> который затем имеет контейнер и столбец <div>.Итак, в примере с Фрилансером это выглядит так:

<section class="success" id="about">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2>About</h2>
                    <hr class="star-light">
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 col-lg-offset-2">
                    <p>Freelancer is a free bootstrap theme created by Start Bootstrap. The download includes the complete source files including HTML, CSS, and JavaScript as well as optional LESS stylesheets for easy customization.</p>
                </div>
                <div class="col-lg-4">
                    <p>Whether you're a student looking to showcase your work, a professional looking to attract clients, or a graphic artist looking to share your projects, this template is the perfect starting point!</p>
                </div>
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <a href="#" class="btn btn-lg btn-outline">
                        <i class="fa fa-download"></i> Download Theme
                    </a>
                </div>
            </div>
        </div>
    </section>

Пример CSS:

section.success {
color: #fff;
background: #18bc9c;
}

.container {
width: 1170px;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}

Загрузите этот шаблон, он использует Бутстрап, и поиграйте с ним, чтобы получить желаемый вид.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top