Установите автоматическую высоту и ширину в 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;
}
 cimmanon23 июн. 2013 г., 20:45
.Featured_content установлен вposition: fixed потому что вам действительно нужно, чтобы он находился в фиксированном положении независимо от прокрутки или потому что вы не моглине можете найти другой способ, чтобы он был справа от вашего другого контента?

Ответы на вопрос(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;
 }

Будь хорошим, Леонардо

 leoMestizo23 июн. 2013 г., 20:51
Я не'не знаю, что о разнице междуна пересмотре а такжеРекомендация кандидата, Спасибо за информацию! Но я нене понимаю, что вы имеете в виду.flex-ppal-setup знак равно
 cimmanon23 июн. 2013 г., 20:33
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();
});

ДЕМО 1

Если вы нене хочу 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;
}

ДЕМО 2

 user135807223 июн. 2013 г., 19:34
это все еще не работает для меня. Это все та же проблема :-(
 user253936925 мар. 2014 г., 08:54
^ @media (минимальная ширина: 720px) {. что-то {ширина: 720px}}
 cimmanon23 июн. 2013 г., 19:46
Если OP не добавляет тег javascript, он 'Лучше всего предоставлять только чисто CSS-решения (даже если добавлен тег JS, чистый CSS> Javascript).
 cimmanon23 июн. 2013 г., 20:18
Можете ли вы быть более конкретным относительно того, чтоБезразлично»т работа? Потому что, похоже, это работает для меня.
 user135807223 июн. 2013 г., 20:27
ладно ... в чем проблема: content_features идеально прилипает к нижнему колонтитулу на экране моего ноутбука, но это далеко от нижнего колонтитула на большом экране. и это также над нижним колонтитулом с полосой прокрутки в другом маленьком экране ноутбука. мой макет выглядит хорошо, но функции не в том же положении разных размеров экрана.
 user135807223 июн. 2013 г., 19:55
Я пытался предоставить чистый CSS и до сих пор не могу справиться с этим.
 user135807223 июн. 2013 г., 20:30
@ 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>

Ваш ответ на вопрос