Html aside 100 height

clubmate.fi

100% height columns & fixed width sidebar: pure CSS solutions to common fluid layout problems

Here’s a selection of pure CSS solution to some common layout issues. All of these work in IE 8.

When flexbox is supported more widely, it’s gonna be a big mind-shift for developers. But for now, we don’t have flexbox , we have to muggle along with floats and other means available to us.

• Have to work in IE 8 (no flexbox or other fancy stuff)
• No background image hacks
• No JavaScript hacks
• Must be fluid

Fixed width sidebar and fluid width content

Almost exceptionally you want the content to be fluid and the sidebar fixed width. Why? Sidebar may have fixed width elements, i.e. Facebook like box, and it’s super ugly when navigation list items start to wrap when the sidebar width decreases.

This example is stripped to its most basic form. See more styled version below.

Normal, non surprising HTML:

section class="article-wrap"> article> p>Some content herep> article> section> aside class="sidebar"> h2>Sidebarh2> ul> li>Navigationli> li>List etc.li> ul> aside>

And also not so surprising CSS:

// Vars $sidebar-width: 200px; // The thing .article-wrap  margin-right: $sidebar-width; > article, .sidebar  float: left; > .sidebar  box-sizing: border-box; padding-left: 20px; width: $sidebar-width; >

We’re giving the .article-wrap a right margin of the sidebar width, and that somehow enables us to float the fixed width sidebar along the main content.

But for now, I guess it’s safe to say:

• Use the display: table method for 100% height columns. It’s simple.
• Sit home and wait for flexbox.

Источник

How to do an aside with 100% height?

I have this code, and I would like to have the aside with 100% height. I have already set the height of the aside , body and section to 100%, but it does not work. Do you know how to do it? Is there any other way to do it? Thanks

@font-face < font-family: 'kinder'; src: url('kindergarten.ttf'); >/* Eléments principaux de la page */ body < background: url('back.jpg'); font-family: 'kinder', Arial, sans-serif; color: #181818; >#bloc_page < width: 100%; margin: auto; >/* Header */ header < display: flex; flex-direction: column; justify-content: space-between; align-items: center; >#titre < display: flex; flex-direction: row; align-items: flex-end; >#titre div < position: absolute; right: 40px; top: 25px; >/* Body */ aside < width: 5%; background: url(ban.jpg); border-radius: 4px; >section

Jules Raymond
Etudiant à l'université de Californie-Berkeley
Mon expérience

  
De 1992 à 2004: naissance et école primaire
  
De 2004 à 2010: école secondaire (high scool)
  
De 2010 jusqu'à présent: étudiant universitaire

Mes compétances

  
HTML & CSS (en procès)
  
PHP & MySql (avancé)
  
C (expert)

Ma formation

  
J'ai appris sur OpenClassroom.
  
J'ai posé mes questions sur StackOverFlow.

Источник

Верстка: main и aside во всю высоту страницы

У тегов header , nav и footer фиксированная высота (из-за этого не получается нормально использовать height: 100% ). Высота aside и main подстраивается под контент. Как сделать, чтобы высота обоих блоков была одинаковой? Не хочется использовать JavaScript и всякие обманки (например, лишний div с background-color как у aside ). Возможно сделать это средствами HTML+CSS?

1 ответ 1

Нашёл решение. Это flexbox ( display: flex ). Работает во всех браузерах, кроме IE8-.

Мой исправленный и рабочий пример:

* < padding: 0; margin: 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; >html, body < width: 100%; height: 100%; >p < padding: 10px 0; >h1 < font-weight: 600; font-size: 1.6em; >h2 < font-weight: 600; font-size: 1.4em; >strong < font-weight: 600; font-size: 16px; >/**********************************/ #wrapper < max-width: 1400px; margin: 0 auto; >header, nav, main, footer < width: 100%; position: relative; background-color: #333; height: 100px; >nav < background-color: #262626; border-top: 1px solid rgba(255, 255, 255, 0.1); height: 70px; >main < background-color: #fff; height: 100%; ; /**/ display: flex; >#Content < padding: 40px; column-count: 2; /**/ flex-grow: 1; >aside < background-color: #f7f7f7; padding: 40px 20px; width: 300px; /**/ flex-shrink: 0; >#aside < width: 300px; height: 100%; background-color: #f7f7f7; >footer

 
 
 
 
What is Lorem Ipsum?
 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 
Where does it come from?
 
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
 
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
 
Why do we use it?
 
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
 
Where can I get some?
 
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
 
 
  
 

Что нужно сделать написано здесь (вкратце): Скажите «Привет, flexbox»

На Хабре подробно расписано, что такое flexbox и как его использовать (2014 год):

Про баги кроссбраузерности flexbox (2015 год):

Ещё про использование flexbox и его кроссбраузерность (2014 год):

Источник

Как сделать aside во всю высоту страницы?

Пример реализации взял отсюда, может вам подойдет:

Ниже пример вашего макета: далее допилите под себя

* < padding: 0; margin: 0; box-sizing: border-box; >aside < background: #181818; padding: 15%; color: #fff; border-right: 5px solid #4d4d4d; height: 100%; >aside img < width: 57px; >aside .logo < font-size: 27px; margin-left: 10px; font-weight: bold; position: relative; top: 11px; >aside h3 < margin-top: 50px; font-size: 25px; >aside ul < list-style: none; >aside ul li < color: #fff; display: block; margin-top: 20px; transition: transform .4s ease; >aside ul li:hover, aside ul a:hover < color: #ff052f; transform: scale(1.05); >aside ul li, aside ul a < text-decoration: none; >main .features < float: left; color: #fff; margin-top: 100px; text-align: center; width: 75%; >main .features h1 < font-size: 40px; >main .features p < max-width: 500px; margin: 20px auto; >.alert-danger < float: left; clear: both; width: 400px; margin: 20px 31.5%; text-align: left; >.btn-info < background: #ff052f; border: #ff052f; color: #fff; >form < margin-left: 26%; width: 500px; margin-top: 50px; >.pr < text-align: left; >.wrapper < display: flex; >.left < width: 200px; position: fixed; background: #181818; height: 100%; >.right

Источник

how to adjust aside height?

I just want aside can reach to the footer, and I set the height of aside as 100%, but it seems nothing happened. my css:

my page is like: So, how to let the gray aside reach to the footer?

1 Answer 1

You might use a flex layout to style your page. Everything on the page could be inside a flex container

That container holds its content as 3 columns (header, container and footer) using the flex-direction: column; property. With height: 100vh; we make the page fill the screen.

The is another flex container itself, which holds your content and your sidebar. This container must fill the vertical space of your page ( flex-grow: 1; ), to make the footer remains at the bottom and the sidebar have a 100% height. You also probably want your sidebar to maintain its width ( flex-shrink: 0; ) and the content to fill the rest of the width ( flex-grow: 1; ).

body < margin: 0; >#flex-outer < height: 100vh; display: flex; flex-direction: column; >header < height: 150px; background-color: #E6E6E6; >#container < display: flex; background-color: pink; flex-grow: 1; >.content < flex-grow: 1; >aside < background-color: grey; width: 300px; flex-shrink: 0; >footer

But if the height of flex-outfitter is 100%, it seems the aside can not fill the page anymore. Is their a way to solve this problem? cause the height of the container would not be a fixed number I think. Thank you!

Источник