CSS: особые проблемы с макетом жидкости - PullRequest
Новая
       6

CSS: особые проблемы с макетом жидкости

5 голосов
/ 15 декабря 2010

alt text

См. Прикрепленное изображение. Как это достигается? Черт возьми, я занимаюсь CSS уже 8 лет, но почему-то мне никогда не приходилось это делать!

Спасибо!

Ответы [ 5 ]

5 голосов
/ 15 декабря 2010

Вот как я это делаю: 

<style> 
  #container { margin-left: 250px; }
  #sidebar {
    display: inline; /* Fixes IE double-margin bug. */
    float: left;
    margin-left: -250px;
    width: 250px;
  }

  /* Definitions for example only: */
  #sidebar { background: #FF0000; }
  #content { background: #EEEEEE; }
  #sidebar, #content { height: 300px; }
</style>

<div id="container">
  <div id="sidebar"></div>
  <div id="content"></div>
</div>

Пример здесь

3 голосов
/ 15 декабря 2010

Я реализовал это на своем сайте некоторое время назад, но я потерял код.Вот быстрый макет CSS:

HTML: 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>Test</title>
    </head>

    <body>
        <div id="left">
            Mr. Fixed-width left
        </div>

        <div id="right">
            Mr. Dynamic right. Scroll me!
        </div>
    </body>
</html>

А вот CSS: 

body
{
    padding-left: 230px;
}

#left
{
    position: fixed;
    height: 100%;
    left: 0px;
    top: 0px;
    width: 200px;

    background-color: rgb(150, 150, 150);
    border-right: 5px solid rgb(50, 50, 50);

    padding: 10px;
}

#right
{    
    width: 100%;
    height: 10000px;
}

Это должно сработать, и вот живая копия: http://jsfiddle.net/dDZvR/12/.

Обратите внимание, что всякий раз, когда вы добавляете отступы, границы, поля и т. Д. К левой панели, вы должны увеличивать отступы на теле.Это сэкономит вам массу отладки;)

Удачи!

1 голос
/ 18 февраля 2015

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

.container {
    width: 100%;
    height: 100px;
    overflow: hidden;
    position: relative;
}

.left {
    position: absolute;
    width: 80px;
    height: 100%;
}

.right {
    position: relative;
    left: 80px;
    top: 0;
    margin-right: 100px;
    height: 100%;
}

См. Демонстрацию .

0 голосов
/ 18 февраля 2015

Это самое простое решение, которое я мог придумать.

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

HTML: 

    <div class="wrapper">

      <div class="fixed"></div>

      <div class="responsive">xx</div>

    </div>

CSS: 

  .wrapper {

    width: 100%;

  }

  .fixed {

    position: absolute;
    bottom: 0;
    left: 0;
    top: 0;


  }

  .responsive {

    margin-left: 250px;

  }
0 голосов
/ 18 февраля 2015

Вы всегда можете использовать макеты отображения таблицы (вздох) . 

.container {
  width: 100%;
  display: table;
}
.container div {
  display: table-cell;
}
.sidebar {
  width: 200px;
  background: gray;
}
<div class="container">
  <div class="sidebar">fixed width sidebar</div>
  <div>dynamic content</div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...