Правое поле теряется при сворачивании окна

#html #css #margin #minimize

#HTML #css #поле #свернуть

Вопрос:

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

Идея состоит в том, чтобы иметь тело, которое всегда поддерживает определенное поле страницы вокруг содержимого. Затем, чтобы содержимое всегда было центрировано.

Код ниже. Я упростил свою реализацию, чтобы выделить мою проблему.

 <style>
  .panel{
     min-width: 1020px;
     max-width: 1200px;
     margin: 0px auto 15px auto;
  }
</style>

<body style="margin: 10px 20px 5px 20px;">
    <div class="panel">
    ....my content
    </div>
</body>

Ответ №1:

Вам нужно использовать ‘display: inline-block;’

http://jsfiddle.net/CunsN/

 <body style="display:inline-block;margin: 10px 20px 5px 20px;">
  <div class="panel">
  ....my content
  </div>
</body>

Ответ №2:

попробуйте исправить положение и забудьте о встроенном стиле

 <style>
body{
   position:fixed;
   top 10px;
   right:20px;
   bottom:5px;
   left:20px;
   display:block;
}
  .panel{
     min-width: 1020px;
     max-width: 1200px;
     margin: 0px auto 15px auto;
  }
</style>

<body>
    <div class="panel">
    ....my content
    </div>
</body>

1. Спасибо, но установка фиксированной позиции потребует от меня изменения некоторых позиций и стилей остальных элементов. Хотя я попробую это сделать, просто чтобы посмотреть, как это работает на производстве. Спасибо.

Ответ №3:

Вот решение, которое я в итоге использовал.

 <style>
    body{
      background-color: #F5F5F5;
      min-width: 1020px;
      margin-top: 10px;
      margin-bottom: 5px;
    }
   .panel{
      background-color: #FFFFFF;
      position: relative;
      margin: 0px 20px 15px 20px
    }
</style>

<body>
    <div class="panel">
       ....my content
    </div>
</body>

Спасибо за все ваши предложения.