Как установить ширину процента в процентах?

У меня проблема: Я хотел бы создать html-страницу, где #sidebar охватывает постоянный 27px, а #content охватывает оставшуюся часть экрана. #content разделен на две области, разделяющие его на 40% - 60%.Как установить ширину процента в процентах?

<html> 
    <body> 
    <div id="sidebar"> 
    </div> 
    <div id="content"> 
     <div id="forty-percent"> 
     </div> 
     <div id="sixty-percent"> 
     </div> 
    </div> 
    </body> 
</html>

Я попытался сделать следующий CSS:

#sidebar{ 
    width:27px; 
} 
#content{ 
    position:absolute; 
    padding-left:27px; 
    width:100%; 
}

Но тогда я не могу разделить содержание на 40% -60%, потому что проценты рассчитываются по ширине #content и не из его площадь внутри.

Что я делаю неправильно? Не могли бы вы помочь?

UPDATE:

Демонстрационная версия НЕ рабочей версии:

http://jsbin.com/iseqon/1/edit

В идеале пунктирные коробки должны быть бок о бок, в синей коробке.

источник

2013-05-02 Barnabas Szabolcs

пожалуйста кладете HTML также или сделать jsfiddle. – crazyrohila

Я сделал оба, теперь, надеюсь, это поможет. –

Вы имеете в виду что-то вроде этого: http://jsfiddle.net/yWjMC/ –

Это может удовлетворить ваши потребности. Если вы хотите лучше контролировать свой #sidebar & #content вертикальное выравнивание, вы должны использовать встроенный блок, чтобы иметь только CSS-решение.

Вы можете посмотреть его здесь жить: http://codepen.io/jpsirois/pen/dvbmEy

* { 
    /* This prevent padding to be added on defined width */ 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

body { 
    font-size: 0; /* Need to be set to 0 to properly use inline-block here */ 
    color: white; /* For a better preview purpose only */ 
} 

#sidebar, 
#content { 
    display: inline-block; /* Allow vertical-align control (float didn’t) */ 
    font-size: 16px; /* Reset font-size to normal */ 
    vertical-align: middle; /* Demo of vertical-alignement */ 
} 

#sidebar { 
    width: 27px; 
    background: darkred; 
    height: 50px; /* For a better preview purpose only */ 
    margin-right: -27px; /* This allow #content to be inlined aside */ 
} 

#content { 
    font-size: 0; /* Need to be set to 0 to properly use inline-block here */ 
    width: 100%; 
    padding-left: 27px; 
} 

#forty-percent, 
#sixty-percent { 
    height: 100px;/* For a better preview purpose only */ 
    display: inline-block; 
    font-size: 16px; /* Reset font-size to normal */ 
} 

#forty-percent { 
    width: 40%; 
    background: darkgreen; 
} 

#sixty-percent { 
    width: 60%; 
    background: darkblue; 
}

источник

2013-05-02 13:42:57 JPSirois

Прохладный! Я искал этот материал для заполнения коробки! Удивительно, thx! Я думаю, что это будет работать с высотой: 100%, если я буду использовать абсолютное позиционирование ... правильно? –

Как я уже сказал, вам нужно определить высоту родительского контейнера, иначе у вас будет процент от чего? Определение фиксированной высоты в родительском контейнере является обязательным. –

Box-Sizing определенно является обязательным в эти дни. Вам просто нужно знать, нужно ли вам поддерживать IE7, он доступен только с IE8. Если вы используете абсолютное положение, вы больше не сможете использовать вертикальное выравнивание. Это действительно зависит от ваших потребностей. Если вы это описали, я могу помочь вам найти правильное решение. – JPSirois

как иметь родительский div, который был бы относительным, а затем иметь div внутри поплавка справа или слева с абсолютным положением внутри контейнера. когда родительский контейнер pos pos и ребенок является абсолютным, дети с позицией относительно своего контейнера. Другими словами, что-то вроде этого (непроверенные, но должно дать вам правильное представление)

#wrapper { 
    position:relative; 
    width:100%; 
    margin:50px; 
} 
#leftCol { 
    width:60%; 
    background-color:yellow; 

} 
#rightCol { 
    width:40%; 
    position:absolute; 
    right:0px; 
    top:0px; 
    height:100px; 
    background-color:red; 
} 
</style> 


<div id='wrapper'> 
    <div='leftCol'> 
    </div> 
    <div id='rightCol'> 
    </div> 
</div>

источник

2013-05-02 13:05:25

Спасибо, но моя проблема в том, что оболочка не должна иметь фиксированную ширину, но должна охватывать оставшуюся часть тела. –

oh, как насчет margin-right на контенте и поместите боковую панель в абсолютное право относительно контейнера? –

Я обновил код, надеюсь, это больше того, чего вы хотите –

-2

I am using your HTML only change the CSS. 
My CSS is 

#sidebar 
{ 
width:27px; 
min-width:27px; 
float:left; 
} 

#content 
{ 
float:right; 
width:100%-28px; 
min-width:100%-28px; 
} 

#forty-percent 
{ 
width:40%; 
float:left; 
} 
#sixty-percent 
{ 
width:60%; 
float:right; 
} 

Hope this will help you.Thanks.

источник

2013-05-02 13:21:38

вы не можете выполнять вычисления в CSS с помощью метода 'calc()' –

@Gaby aka G. Petri oli Я не использую метод calc(). В CSS можно использовать манипуляции с родителями и фиксированными значениями. См. эту ссылку http://www.cssplay.co.uk/boxes/outside.html. И перед тем, как проголосовать, хорошо изучите .. –

Вы действительно прочитали эту статью? это делается с несколькими элементами, а не с вычислениями внутри свойств CSS (*, которые не могут быть выполнены *) –

Вам это нужно, чтобы плавать #sidebar и дать равный margin-left к #content, а также плавают две внутренние коробки таким образом, они могут сидеть бок о бок ..

#sidebar { 
    width:27px; 
    float:left; 
} 
#content { 
    margin-left:27px; 
    overflow:auto; 
} 
#forty-percent { 
    width:40%; 
    float:left; 
} 
#sixty-percent { 
    width:60%; 
    float:left; 
}

, а также не использовать # полукокса в реальной id

Demo вhttp://jsfiddle.net/gaby/8a7CN/

(ваш фиксированный демо jsbin в http://jsbin.com/iseqon/4/edit вы должны иметь в виду, что граничит добавить к ширине, поэтому он не может работать с процентами очень хорошо)

источник

2013-05-02 13:33:13

Brilliant, thx! –

Я решил продолжать принимать версию с размером коробки, потому что это помогло мне больше в долгосрочной перспективе. –

@BarnabasSzabolcs, что лучше работает для вашего дела :) –

Как установить ширину процента в процентах?

ответ

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