Вопрос:

Как сделать мою боковую панель такой же высоты, как мой контент?

html css

245 просмотра

3 ответа

25 Репутация автора

http://jsfiddle.net/g93bswco/ Я приведу простой пример здесь.

Вы можете видеть, прокручиваю ли я свой контент, боковая панель будет отображаться только для первого 100% экрана. Я хочу, чтобы он расширялся до той же высоты, что и мой основной контент. Я просмотрел много старых вопросов здесь, но я все еще не понял. Было бы здорово, если бы вы могли сделать это на моем jsfiddle. Спасибо!

#header {
  margin: 0;
  padding: 10px;
  text-align: right;
  background: blueviolet;
}

#content {
  margin-left: 190px;
  padding: 10px;
}

#sidebar {
  float: left;
  width: 190px;
  height: 100%;
  background: orange;
  position: absolute;
}

#footer {
  margin: 0;
  padding: 10px;
  text-align: center;
}
<div id="header">
  login
</div>
<div id="sidebar">
</div>
<div id="content">
  many lines article here, see the link above
  Prime Photos: Prime Photos offers free online photo storage to Prime members, who can save and share unlimited photos on desktop, mobile, and tablet. Share unlimited photo storage with up to 5 people, and collect photos together in the Prime Photos Family Vault. With the Prime Photos mobile and web apps, photo backup has never been easier. Use the iOS or Android mobile apps to auto-save your photos, then safely delete them from your phone to free up space on your device. Upload photos from your desktop computer, and store them safely all in Prime Photos web app. Access your content anywhere, across desktop, mobile, and tablet. Prime Photos: Prime Photos offers free online photo storage to Prime members, who can save and share unlimited photos on desktop, mobile, and tablet. Share unlimited photo storage with up to 5 people, and collect photos together in the Prime Photos Family Vault. With the Prime Photos mobile and web apps, photo backup has never been easier. Use the iOS or Android mobile apps to auto-save your photos, then safely delete them from your phone to free up space on your device. Upload photos from your desktop computer, and store them safely all in Prime Photos web app. Access your content anywhere, across desktop, mobile, and tablet. Prime Photos: Prime Photos offers free online photo storage to Prime members, who can save and share unlimited photos on desktop, mobile, and tablet. Share unlimited photo storage with up to 5 people, and collect photos together in the Prime Photos Family Vault. With the Prime Photos mobile and web apps, photo backup has never been easier. Use the iOS or Android mobile apps to auto-save your photos, then safely delete them from your phone to free up space on your device. Upload photos from your desktop computer, and store them safely all in Prime Photos web app. Access your content anywhere, across desktop, mobile, and tablet. Prime Photos: Prime Photos offers free online photo storage to Prime members, who can save and share unlimited photos on desktop, mobile, and tablet. Share unlimited photo storage with up to 5 people, and collect photos together in the Prime Photos Family Vault. With the Prime Photos mobile and web apps, photo backup has never been easier. Use the iOS or Android mobile apps to auto-save your photos, then safely delete them from your phone to free up space on your device. Upload photos from your desktop computer, and store them safely all in Prime Photos web app. Access your content anywhere, across desktop, mobile, and tablet.
</div>
<div id="footer">
</div>

Автор: Weiheng Li Источник Размещён: 02.01.2018 06:36

Ответы (3)


1 плюс

1233 Репутация автора

Решение

Если у вас есть такая возможность, вы можете реструктурировать свой HTML, чтобы обернуть содержимое и боковую панель в контейнер. Этот контейнер, со display: flexсвойством и align-items: stretchдолжен сделать свое дело для вас.

    #header {
      margin: 0;
      padding: 10px;
      text-align: right;
      background: blueviolet;
    }

    #container {
      display: flex;
      align-items: stretch;
    }

    #sidebar {
      flex: none;
      width: 190px;
      background: orange;
    }

    #content {
      padding: 10px;
    }

    #footer {
      margin: 0;
      padding: 10px;
      text-align: center;
    }
<div id="header">
  login
</div>
<div id="container">
  <div id="sidebar">
  </div>
  <div id="content">
  Lorem ipsum dolor sit amet
  </div>
</div>
<div id="footer">
&copy;
</div>

Автор: chriskirknielsen Размещён: 02.01.2018 06:45

1 плюс

2687 Репутация автора

Я не знаю, разрешено ли это, но я добавил new parent divдля sidebarи content. Тогда было легко настроить остальное, поскольку parentвысота будет принимать child(содержимое), тогда высота боковой панели будет такой же высоты, как и содержимое, потому что боковая панель определена как height:100%(100% ее родительской высоты).

Вот код и скрипка :

#header
{
    margin: 0;
    padding: 10px;
    text-align: right;
    background: blueviolet;
}
#content
{
    position:relative;
    float:right;
    margin-left: 190px;
    padding: 10px;
}

#middle
{
  position:relative;
  float:left;
  margin:0;
  padding:0;
  width:100%;
  
}

#sidebar
{
    position:relative;
    float: left;
    width: 190px;
    height: 100%;
    background: orange;
    position: absolute;
}
#footer
{
    margin: 0;
    padding: 10px;
    text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>

<body>

<div id="header">
    login
</div>

<div id="middle">
  <div id="sidebar">

  </div>

  <div id="content">
      Prime Photos: Prime Photos offers free online photo storage to Prime members, who can save and share unlimited photos on desktop, mobile, and tablet. Share unlimited photo storage with up to 5 people, and collect photos together in the Prime Photos Family Vault. With the Prime Photos mobile and web apps, photo backup has never been easier. Use the iOS or Android mobile apps to auto-save your photos, then safely delete them from your phone to free up space on your device. Upload photos from your desktop computer, and store them safely all in Prime Photos web app. Access your content anywhere, across desktop, mobile, and tablet.
      Prime Photos: Prime Photos offers free online photo storage to Prime members, who can save and share unlimited photos on desktop, mobile, and tablet. Share unlimited photo storage with up to 5 people, and collect photos together in the Prime Photos Family Vault. With the Prime Photos mobile and web apps, photo backup has never been easier. Use the iOS or Android mobile apps to auto-save your photos, then safely delete them from your phone to free up space on your device. Upload photos from your desktop computer, and store them safely all in Prime Photos web app. Access your content anywhere, across desktop, mobile, and tablet.
      Prime Photos: Prime Photos offers free online photo storage to Prime members, who can save and share unlimited photos on desktop, mobile, and tablet. Share unlimited photo storage with up to 5 people, and collect photos together in the Prime Photos Family Vault. With the Prime Photos mobile and web apps, photo backup has never been easier. Use the iOS or Android mobile apps to auto-save your photos, then safely delete them from your phone to free up space on your device. Upload photos from your desktop computer, and store them safely all in Prime Photos web app. Access your content anywhere, across desktop, mobile, and tablet.
      Prime Photos: Prime Photos offers free online photo storage to Prime members, who can save and share unlimited photos on desktop, mobile, and tablet. Share unlimited photo storage with up to 5 people, and collect photos together in the Prime Photos Family Vault. With the Prime Photos mobile and web apps, photo backup has never been easier. Use the iOS or Android mobile apps to auto-save your photos, then safely delete them from your phone to free up space on your device. Upload photos from your desktop computer, and store them safely all in Prime Photos web app. Access your content anywhere, across desktop, mobile, and tablet.
  </div>
</div>
<div id="footer">
    
</div>

</body>
</html>

Автор: Ivan86 Размещён: 02.01.2018 06:47

1 плюс

32 Репутация автора

Я рекомендую использовать Flexbox, который был представлен в CSS3. Позволяет размещать элементы рядом друг с другом и контролировать их выравнивание. На css-tricks.com есть полезное резюме: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Чтобы подготовить вашу разметку для flexbox, я добавил оберточный mainэлемент вокруг вашей боковой панели, который будет принимать стили flexbox, удалил поля вашего #contentи плавающие элементы, которые вы использовали, чтобы расположить два элемента div рядом друг с другом. Наконец я добавил display: flexи align-items: stretchв обертку. Это делает CSS меньше и легче следовать.

#header {
  margin: 0;
  padding: 10px;
  text-align: right;
  background: blueviolet;
}

main {
  display: flex;
  align-items: stretch;
}

#content {
  padding: 10px;
}

#sidebar {
  width: 190px;
  background: orange;
}

#footer {
  margin: 0;
  padding: 10px;
  text-align: center;
}
<!DOCTYPE html>
<html lang="en">

  <head>
  </head>

  <body>

    <div id="header">
      login
    </div>

    <main>
      <div id="sidebar">
        Placeholder
      </div>
      <div id="content">
        Prime Photos: Prime Photos offers free online photo storage to Prime members, who can save and share unlimited photos on desktop, mobile, and tablet. Share unlimited photo storage with up to 5 people, and collect photos together in the Prime Photos Family
        Vault. With the Prime Photos mobile and web apps, photo backup has never been easier. Use the iOS or Android mobile apps to auto-save your photos, then safely delete them from your phone to free up space on your device. Upload photos from your
        desktop computer, and store them safely all in Prime Photos web app. Access your content anywhere, across desktop, mobile, and tablet. Prime Photos: Prime Photos offers free online photo storage to Prime members, who can save and share unlimited
        photos on desktop, mobile, and tablet. Share unlimited photo storage with up to 5 people, and collect photos together in the Prime Photos Family Vault. With the Prime Photos mobile and web apps, photo backup has never been easier. Use the iOS
        or Android mobile apps to auto-save your photos, then safely delete them from your phone to free up space on your device. Upload photos from your desktop computer, and store them safely all in Prime Photos web app. Access your content anywhere,
        across desktop, mobile, and tablet. Prime Photos: Prime Photos offers free online photo storage to Prime members, who can save and share unlimited photos on desktop, mobile, and tablet. Share unlimited photo storage with up to 5 people, and collect
        photos together in the Prime Photos Family Vault. With the Prime Photos mobile and web apps, photo backup has never been easier. Use the iOS or Android mobile apps to auto-save your photos, then safely delete them from your phone to free up space
        on your device. Upload photos from your desktop computer, and store them safely all in Prime Photos web app. Access your content anywhere, across desktop, mobile, and tablet. Prime Photos: Prime Photos offers free online photo storage to Prime
        members, who can save and share unlimited photos on desktop, mobile, and tablet. Share unlimited photo storage with up to 5 people, and collect photos together in the Prime Photos Family Vault. With the Prime Photos mobile and web apps, photo
        backup has never been easier. Use the iOS or Android mobile apps to auto-save your photos, then safely delete them from your phone to free up space on your device. Upload photos from your desktop computer, and store them safely all in Prime Photos
        web app. Access your content anywhere, across desktop, mobile, and tablet.
      </div>
    </main>

    <div id="footer">

    </div>

  </body>

</html>

Автор: Christian Danscheid Размещён: 02.01.2018 06:52
Вопросы из категории :
32x32