2015-07-05 5 views
2

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

Стиль:

aside { 
width:260px; 
float:right; 
border-left:1px dashed #aaa; 
padding-right:15px; 
padding-left:15px; 
text-align:center; 
position:absolute; 
overflow:auto; 
background-color:blue; 
border-radius:10px; 
box-shadow:0px 0px 7px rgba(0,0,0,0.5); 
} 

ответ

3

Удалить position: absolute;. Если вы хотите сохранить position: absolute;, вы можете добавить right: 0;.

html,body{ 
 
    height: 100%; 
 
} 
 
aside { 
 
width:260px; 
 
float:right; 
 
border-left:1px dashed #aaa; 
 
padding-right:15px; 
 
padding-left:15px; 
 
text-align:center; 
 
overflow:auto; 
 
height: 100%; 
 
background-color:blue; 
 
border-radius:10px; 
 
box-shadow:0px 0px 7px rgba(0,0,0,0.5); 
 
}
<aside>I'm at the right side</aside>

+0

Это не влияют на высоту в сторону! –

+0

Нравится, обновил? @johngraham –

1

Как сказал Густав, вы должны удалить 'позицию: абсолютная' для переключения в сторону. Для того, чтобы определить высоту, все родители элемента, должны иметь определенную высоту, поэтому элемент детей будет иметь ссылку на рендеринг собственной высоты, как это:

html, body{ 
 
    height: 100%; 
 
} 
 

 
aside { 
 
    width:260px; 
 
    float:right; 
 
    border-left:1px dashed #aaa; 
 
    padding-right:15px; 
 
    padding-left:15px; 
 
    text-align:center; 
 
    overflow:auto; 
 
    background-color:blue; 
 
    border-radius:10px; 
 
    box-shadow:0px 0px 7px rgba(0,0,0,0.5); 
 
    height: 100%; 
 
}
<html> 
 
<head></head> 
 
<body> 
 
    <aside>I'm at the right side</aside> 
 
</body> 
 
</html>

+0

спасибо u. но он не работает, и я действительно не знаю, почему. установив минимальную высоту до 100%, сделала высоту в сторону относительно ее содержания –

Смежные вопросы