прокрутка одной колонки css вместо полной страницы

В конце страницы должен быть нижний колонтитул с высотой 30 пикселей. Выше находится область содержимого с 2 столбцами, которые должны заполнять доступную высоту (размер окна), и при необходимости левый столбец должен прокручиваться. На данный момент полная страница прокручивается вместо этого одного столбца.прокрутка одной колонки css вместо полной страницы

Как это исправить? Благодаря!

footer { 
 
    background-color: #000000; 
 
    height: 30px; 
 
    width: 100%; 
 
    position: absolute; 
 
    bottom: 0px; 
 
} 
 

 

 
.col1 { 
 
    float:left; 
 
    padding-left: 20px; 
 
    overflow:auto; 
 
} 
 

 
.col2 { 
 
    float:left; 
 
    padding-left: 20px; 
 
    
 
}

<html> 
 
<body> 
 
<header> 
 
    <h1>Headline</h1> 
 
</header> 
 
    <div class="ym-wrapper"> 
 
     <div class="grid"> 
 
      <div class="col1"> 
 
       <p>text</p> 
 
       <p>text</p> 
 
       <p>text</p> 
 
       <p>text</p> 
 
       <p>text</p> 
 
       <p>text</p> 
 
       <p>text</p> 
 
       <p>text</p> 
 
       <p>text</p> 
 
    
 
      </div> 
 
      <div class="col2"> 
 
       text 
 
      </div> 
 

 
     </div> 
 
     <footer></footer> 
 
    </div> 
 
    
 
</body> 
 
    
 
    
 
</html>

источник

2015-01-29 Chris

try this css: 

html{overflow:hidden} 
footer { 
    background-color: #000000; 
    height: 30px; 
    width: 100%; 
    position: absolute; 
    bottom: 0px; 
} 


.col1 { 
    float:left; 

    width:250px; 
    padding:3px; 
    position:relative 
} 

.content 
{ 
height: 18000px; 
    overflow:auto; 
    width:250px; 
    background:#fff; 
    position:absolute; 
    bottom:50; 
} 

.col2 { 
    float:left; 
    padding-left: 20px; 

}

И HTML:

<html> 
<body> 
<header> 
    <h1>Headline</h1> 
</header> 
    <div class="ym-wrapper"> 
     <div class="grid"> 
      <div class="col1"> 
      <div class="content"> 
       <p>text</p> 
       <p>text</p> 
       <p>text</p> 
       <p>text</p> 
       <p>text</p> 
       <p>text</p> 
       <p>text</p> 
       <p>text</p> 
       <p>text</p> 
      </div> 
      </div> 
      <div class="col2"> 
       text 
      </div> 

     </div> 
     <footer></footer> 
    </div> 

</body> 


</html>

источник

2015-01-29 00:50:52

Спасибо - но в этом случае нет полосы прокрутки не появляется в колонке col1, когда размер окна термоусаживаемые – Chris

спасибо - как я могу изменить его, что col1 использует полную высоту, которая доступна, от сверху до нижнего колонтитула? – Chris

я придумал следующее решение, который использует настройку высоты с помощью vh.

.col1 { 
 
    float: left; 
 
    width: 300px; 
 
    padding: 10px; 
 
    position: relative; 
 
} 
 
.col2 { 
 
    float: left; 
 
    width: 400px; 
 
    padding: 10px; 
 
    position: relative; 
 
} 
 
.ym-wrapper { 
 
    width: 1000px; 
 
    margin: 0 auto; 
 
} 
 
.content { 
 
    top: 40px; 
 
    width: 100%; 
 
    position: absolute; 
 
    overflow-y: auto; 
 
    height: 90vh; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="style_test.css" type="text/css" /> 
 
</head> 
 

 
<body> 
 
    <div class="ym-wrapper"> 
 
    <div class="col1"> 
 
     <h3>Column</h3> 
 
     <div class="content"> 
 
     <p>text</p> 
 
     <p>text</p> 
 
     <p>text</p> 
 
     <p>text</p> 
 
     <p>text</p> 
 
     <p>text</p> 
 
     <p>text</p> 
 
     <p>text</p> 
 
     <p>text</p> 
 
     <p>text</p> 
 
     <p>text</p> 
 
     <p>text</p> 
 
     <p>text</p> 
 
     <p>text</p> 
 
     <p>text</p> 
 
     <p>text</p> 
 
     <p>text</p> 
 
     <p>text</p> 
 
     <p>text</p> 
 
     <p>text</p> 
 
     <p>text</p> 
 
     <p>text</p> 
 
     <p>text</p> 
 
     <p>text</p> 
 

 
     </div> 
 
    </div> 
 
    <div class="col2"> 
 
     <h3>Column</h3> 
 
     <div class="content"> 
 
     <p>text2</p> 
 
     <p>text2</p> 
 
     <p>text2</p> 
 
     <p>text2</p> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</body> 
 

 

 
</html>

источник

2015-01-30 18:52:55 Chris

прокрутка одной колонки css вместо полной страницы

ответ

Смежные вопросы