Установите автоматическую высоту и ширину в CSS / HTML для разных размеров экрана
я имею2 вопроса с этим макетом :(
.feature_contentсерый фонАдаптируй этоs высота и ширина для разных размеров экрана. Прямо сейчас на больших экранах.feature_content далеко от нижнего колонтитула.Есть горизонтальная полоса прокрутки, которую я хочу удалить независимо от размера экрана.Я бы хотел : адаптироваться.feature_content на оставшуюся высоту и удалите горизонтальную полосу прокрутки.
ВотFIDDLE
И мой код:
HTML:
Header added just for demonstration purposes
Your content goes here
Footer here
CSS:
* {
padding: 0;
margin: 0;
border: 0;
outline: 0;
}
body, html {
width:100%;
min-height: 100%;
}
div {
height:100%;
width:100%;
border:5px solid black;
}
#header {
background-color:orange;
}
#container {
background:blue;
margin: 0 auto;
position: relative;
height: auto !important;
}
#content {
background:pink;
padding-bottom: 100px;
margin: 0 auto;
position: relative;
}
#footer {
bottom: 0;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.4);
height: 70px;
left: 0;
position: fixed;
z-index: 100000;
background:green;
}
.featured_content {
min-height: 750px;
max-height: 750px;
width:200px;
background-color:grey;
position:fixed;
margin:auto 0px;
margin-top: 150px;
}
Ответы на вопрос(3)
DEMO, Попробуй сжать браузерокно и тыпосмотрим, что элементы будут упорядочены.
Что я использовал? Гибкая модель коробки или Flexbox.
Просто добавьте следующие CSS-классы в ваш контейнерный элемент (в этом случаеdiv#container):
flex-init-setup а также .flex-ppal-setup
Куда:
Flex-INIT-установка средстванастройка инициализации flexbox; а такжеFlex-Ppal-установка средстваосновная настройка flexboxВот правила CSS:
.flex-init-setup {
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.flex-ppal-setup {
-webkit-flex-flow: column wrap;
-moz-flex-flow: column wrap;
flex-flow: column wrap;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
}
Будь хорошим, Леонардо
Я не'не знаю, что о разнице междуна пересмотре а такжеРекомендация кандидата, Спасибо за информацию! Но я нене понимаю, что вы имеете в виду
.flex-ppal-setup знак равноFlexbox нена пересмотреэто рекомендация кандидата (то есть считается, что она достаточно стабильна для поставщиков браузеров, чтобы начать ее реализацию). Поддержка браузера нена данный момент тоже хорошо (нет IE <10). Вы'Вы испортили вашу недвижимость в
.flex-ppal-setup (реализация Flexbox 2009 не поддерживает перенос, и выне хватает свойств 2009/2012, которые соответствуют justify-content).Я надеюсь, что это решение, которое выищу!DEMO1 demo2
При таком решении единственная полоса прокрутки на странице находится в разделе содержимого в середине! В этом разделе постройте свою структуру с боковой панелью или чем хотите!
Вы можете сделать это с этим кодом здесь:
<div class="navTop">
<h1>Title</h1>
<nav>Dynamic menu</nav>
</div>
<div class="container">
<section>THE CONTENTS GOES HERE</section>
</div>
<footer class="bottomFooter">
Footer
</footer>
С этим CSS:
.navTop{
width:100%;
border:1px solid black;
float:left;
}
.container{
width:100%;
float:left;
overflow:scroll;
}
.bottomFooter{
float:left;
border:1px solid black;
width:100%;
}
И немного jquery:
$(document).ready(function() {
function setHeight() {
var top = $('.navTop').outerHeight();
var bottom = $('footer').outerHeight();
var totHeight = $(window).height();
$('section').css({
'height': totHeight - top - bottom + 'px'
});
}
$(window).on('resize', function() { setHeight(); });
setHeight();
});
Если вы нене хочу jquery
<div class="row">
<h1>Title</h1>
<nav>NAV</nav>
</div>
<div class="row container">
<div class="content">
<div class="sidebar">
SIDEBAR
</div>
<div class="contents">
CONTENTS
</div>
</div>
<footer>Footer</footer>
</div>
CSS
*{
margin:0;padding:0;
}
html,body{
height:100%;
width:100%;
}
body{
display:table;
}
.row{
width: 100%;
background: yellow;
display:table-row;
}
.container{
background: pink;
height:100%;
}
.content {
display: block;
overflow:auto;
height:100%;
padding-bottom: 40px;
box-sizing: border-box;
}
footer{
position: fixed;
bottom: 0;
left: 0;
background: yellow;
height: 40px;
line-height: 40px;
width: 100%;
text-align: center;
}
.sidebar{
float:left;
background:green;
height:100%;
width:10%;
}
.contents{
float:left;
background:red;
height:100%;
width:90%;
overflow:auto;
}
это все еще не работает для меня. Это все та же проблема :-(
^ @media (минимальная ширина: 720px) {. что-то {ширина: 720px}}
Если OP не добавляет тег javascript, он 'Лучше всего предоставлять только чисто CSS-решения (даже если добавлен тег JS, чистый CSS> Javascript).
Можете ли вы быть более конкретным относительно того, чтоБезразлично»т работа? Потому что, похоже, это работает для меня.
ладно ... в чем проблема: content_features идеально прилипает к нижнему колонтитулу на экране моего ноутбука, но это далеко от нижнего колонтитула на большом экране. и это также над нижним колонтитулом с полосой прокрутки в другом маленьком экране ноутбука. мой макет выглядит хорошо, но функции не в том же положении разных размеров экрана.
Я пытался предоставить чистый CSS и до сих пор не могу справиться с этим.
@ Cimmanon Может быть, я должен использовать медиа-экран в CSS, верно?
мне кажется, что мне подходит следующее:
Мне нужно 3 раздела в моем контейнере, и я попробовал это:
CSS:
.row.content {height: 100%; width:100%; position: fixed; }
.sidenav {
padding-top: 20px;
border: 1px solid #cecece;
height: 100%;
}
.midnav {
padding: 0px;
}
HTML:
<div class="container-fluid text-center">
<div class="row content">
<div class="col-md-2 sidenav text-left">Some content 1</div>
<div class="col-md-9 midnav text-left">Some content 2</div>
<div class="col-md-1 sidenav text-center">Some content 3</div>
</div>
</div>
position: fixedпотому что вам действительно нужно, чтобы он находился в фиксированном положении независимо от прокрутки или потому что вы не моглине можете найти другой способ, чтобы он был справа от вашего другого контента?