Я хочу создать верхнюю панель с двумя секциями. Первый - это раздел размером 230 пикселей (т.е. черный). Второй раздел - ясеневый. Я хочу, чтобы второй раздел был еще одним div.

enter image description here

У меня проблема возникает, когда открываю на большом экране. Происходит следующее:

enter image description here

Вот HTML-код ниже:

<div id="topNav">
<div class="websiteName">
    <h1><i class="fa fa-paper-plane"></i> Admin Panel</h1>
</div>
<div class="topbar">
    <a class="mainMenuTrigger" data-type="on"><i class="fa fa-long-arrow-left"></i></a>
    <a class="settingsTrigger"><i class="fa fa-cog fa-spin fa-fw"></i></a>
</div>

Вот CSS:

#topNav{
  width: 100%;
  display: inline-block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
}
.websiteName{
    width: 230px;
    display: block;
    float: left;
    background: #242A34;
    padding: 15px 0;
}
.websiteName h1{
  color: #fff;
  font-size: 18px;
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: $font-family-base;
}
.topbar{
   background: #fff;
   display: block;
   height: 50px;
   position: relative;
   width: 1135px;
   float: left;
}
3
Ridwanul Hafiz 20 Апр 2016 в 09:36

2 ответа

Лучший ответ

Обновление:

  • width: calc(100% - 230px);: это позволяет адаптировать верхнюю панель.
  • Удалите float и вместо inline-block используйте position: absolute

Ниже приведен несколько голый пример:

*, :before, :after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#topNav {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
}

.websiteName {
  vertical-align: top;
  width: 230px;
  height: 50px;
  position: absolute;
  top: 0;
  left: 0;
  background: #242A34;
  padding: 15px 0;
}

.websiteName h1 {
  color: #fff;
  font-size: 18px;
  margin: 0;
  padding: 0;
  text-align: center;
}

.topbar {
  background: #ccc;
  position: absolute;
  top: 0;
  left: 230px;
  height: 50px;
  width: calc(100% - 230px);
}
<div id="topNav">
  <div class="websiteName">
    <h1>Admin Panel</h1>
  </div>
  <div class="topbar">
  </div>
</div>
1
timolawl 20 Апр 2016 в 07:03

Замените этим ниже css, чтобы решить проблему здесь вам нужно разделить оба div в соответствии с шириной div, поэтому вам нужно использовать width: calc (100% - 230px);

.topbar{
   background: #000;
   display: block;
   height: 50px;
   position: relative;
   width: calc(100% - 230px);
   float: left;
}
0
Iqbal Pasha 20 Апр 2016 в 06:53