Semantic-UI: почему у Body разные размеры области просмотра?

Взгляните, пожалуйста, на мое приложение в стиле Hello World, созданное с помощью Semantic-UI.

Я часто использую Semantic-UI, он мне нравится больше, чем Bootstrap, но я заметил эту постоянную проблему по краям. Окно просмотра имеет своего рода избыточное поле, обратите внимание на нижнюю часть веб-страницы (пустое место) и справа от веб-страницы (больше пустого места).

Я экспериментировал с установкой width/height из html/body на 100%, но безрезультатно.

Это проблема Semantic-UI или что-то еще? Любые предложения по исправлению этого CSS?


html css semantic-ui
person ilrein    schedule 15.06.2015    source источник
comment
ilrein, я обновил свой ответ. Проверьте последние три строки.   -  person m4n0    schedule 15.06.2015

Ответы (4)


arrow_upward
7
arrow_downward

Это связано со свойством ui grid, которое вытягивает содержимое за пределы своей области из-за отрицательного поля. Попробуйте установить его на 0.

.ui.grid {
  margin: -1rem; // Change to 0
}

Лучшей практикой является обернуть сетку пользовательского интерфейса внутри контейнера. Я не знаю, почему на вашем сайте отсутствует CSS-код .container, но он есть в Документах.

Semantic UI Docs Сетка обернутый внутри .main.container с установленной шириной.

person m4n0    schedule 15.06.2015
comment
Лучше всего поместить сетку пользовательского интерфейса в контейнер. Я не знаю, почему код CSS .container отсутствует на вашем сайте, но он есть в Документах. -- Это то, что мне помогло. Добавлен контейнер вокруг сетки для решения проблем, связанных с полями. Спасибо. - person m01010011; 01.08.2020

arrow_upward
7
arrow_downward

Проблема возникает из-за поля по умолчанию «сетки пользовательского интерфейса». Чтобы исправить это, просто добавьте класс «дополненный» к элементу «сетка пользовательского интерфейса». Именно так:

<div class="ui grid padded">
  <!-- your columns -->
</div>

person ikourfaln    schedule 15.06.2015

arrow_upward
0
arrow_downward

если вы установите

 .ui.grid {margin:0}

это будет работать

person maioman    schedule 15.06.2015
comment
Какова наилучшая практика для этого? Очевидно, это не просто так: я не хочу перезаписывать основной семантический код и мне приходится исправлять каждую сетку, которую я использую, просто чтобы моя домашняя страница выглядела хорошо. - person ilrein; 15.06.2015
comment
вы можете установить overflow: hidden в контейнере div. Семантика BTW имеет свои специальные классы для выполнения такого рода модификаций, но для быстрого обходного пути вы можете использовать встроенные стили или также создать пользовательский css (это никогда не повредит) - person maioman; 15.06.2015
comment
Каков конкретный класс для этой проблемы? - person ilrein; 16.06.2015

arrow_upward
0
arrow_downward

Как намекнул Маной, решение в соответствии с документами для основной сетки является

<div class="ui grid container">
  <div class="four wide column">
    <!-- ... -->
  </div>
  <!-- ... -->
</div>
person Simon H    schedule 26.07.2015