Jump to content
  • 0

div height 100%

Simon

Asked by Simon,

 Share

Question

Simon Explorer

Simon

Posted
Posted (edited)

Мозг разрывается не могу ниииикак исправить...

Есть такая тема:

http://floomby.ru/content/7WYLoCplEq/

код такой:

<td colspan="5" rowspan="2" valign="top" style="border:2px solid yellow; height:100%;">
	<div style="width:668px; float:left; border:2px solid red; height:100%;">
						sadsadsa								
	</div>
	<div style="float:left; border:2px solid blue;">
				 dssadsa<br>dssadsa<br>dssadsa<br>dssadsa<br>dssadsa<br>dssadsa<br>dssadsa<br>dssadsa<br>dssadsa<br>dssadsa
	   </div>
</td>

выше есть еще много много <tr><td> и еще выше:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<table cellpadding="0" cellspacing="0" align="center">
		<tr>
		<td height="100%">
				 <table cellpadding="0" cellspacing="0" border="0" height="100%">	
				<tr>
							<td>...

где код с дивами часть таблицы...

я не могу нииииикак сделать дивы под 100%... пример: первый див больше 2ого - 1ый = height:100% и наоборот... чет пробовал с min-height и т.д. нуу никак не хочет :unsure: ((

еще стоит 

html, body { margin:0; padding:0; height:100%; }

п.с. этот пример работает нормально только в Мозилле (

Edited by Simon
Link to comment
Share on other sites

23 answers to this question

Recommended Posts

  • 0
PanSoul Explorer

PanSoul

Posted
Posted
Мозг разрывается не могу ниииикак исправить...

Есть такая тема:

http://floomby.ru/content/7WYLoCplEq/

код такой:

<td colspan="5" rowspan="2" valign="top" style="border:2px solid yellow; height:100%;">
	<div style="width:668px; float:left; border:2px solid red; height:100%;">
						sadsadsa								
	</div>
	<div style="float:left; border:2px solid blue;">
				 dssadsa<br>dssadsa<br>dssadsa<br>dssadsa<br>dssadsa<br>dssadsa<br>dssadsa<br>dssadsa<br>dssadsa<br>dssadsa
	   </div>
</td>

выше есть еще много много <tr><td> и еще выше:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<table cellpadding="0" cellspacing="0" align="center">
		<tr>
		<td height="100%">
				 <table cellpadding="0" cellspacing="0" border="0" height="100%">	
				<tr>
							<td>...

где код с дивами часть таблицы...

я не могу нииииикак сделать дивы под 100%... пример: первый див больше 2ого - 1ый = height:100% и наоборот... чет пробовал с min-height и т.д. нуу никак не хочет :unsure: ((

еще стоит 

html, body { margin:0; padding:0; height:100%; }

п.с. этот пример работает нормально только в Мозилле (

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

P.S. И зачем использовать таблицы? если нужны дивы- так оставь их, зачем вставлять в таблицу? или без таблиц там не обойтись? :unsure:

Link to comment
Share on other sites
  • 0
Simon Explorer

Simon

Posted
  • Author
Posted (edited)

ап, так и не решил проблему, пробую отверстать на дивах ток и тут лажа ((

content 100% в высоту, в нем 2 блока (левый, правый) хочу что бы при увеличении левого , увеличивался и правый и наоборот ток вот чет не увеличиваться ничего (( ставлю текст в левый блок так он не увеличивается а он какой-та отрезанный %) ух голова болит (

http://simon.comyr.com/test/

Edited by Simon
Link to comment
Share on other sites
  • 0
Simon Explorer

Simon

Posted
  • Author
Posted (edited) 


    <style>
    html, body{
        height:100%;
        margin:0;
    }
    </style>
<div style="height: 100%; border:2px solid red;">
    <div style="width: 990px; text-align:center; border:2px solid blue; height:300px;">
            head
    </div>
    <div style="border: 2px solid green; height:2px; width:990px;">

    </div>
    <div style="border: 2px solid green; width:990px; height:100%;">
        dsa
    </div>
    <div>
    ss</div>
</div>

как пример этот код тож так себя ведет... бред блоки ((

Edited by Simon
Link to comment
Share on other sites
  • 0
tius Explorer

tius

Posted
Posted

Simon

>content 100% в высоту, в нем 2 блока (левый, правый) хочу что бы при увеличении левого

+ по ссылке ниже нет никаких правых и левых колонок. Просто слои, один под другим.

как пример этот код тож так себя ведет... бред блоки ((

удалить width (например, в auto выставить ширину), поставить вложенным слоям float: left.

Link to comment
Share on other sites
  • 0
Simon Explorer

Simon

Posted
  • Author
Posted (edited)

Simon

>content 100% в высоту, в нем 2 блока (левый, правый) хочу что бы при увеличении левого

+ по ссылке ниже нет никаких правых и левых колонок. Просто слои, один под другим.

удалить width (например, в auto выставить ширину), поставить вложенным слоям float: left.

извиняюсь путь к стилям не был правильно прописан :rolleyes: ... исправил...

Edited by Simon
Link to comment
Share on other sites
  • 0
Simon Explorer

Simon

Posted
  • Author
Posted (edited)

>http://simon.comyr.com/test/

>Website Under Review

хост левый( над немного подождать они проверяют сайт

да и вообще пока он не работает как реализовать такое:

xXjLQlnbLEOgo52hvFGbQ.jpg

блок, в нем 2 других блока у всех высота 100% (резиновая) в блоке 2, 3 еще блоки тоже с высотой 100%

Edited by Simon
Link to comment
Share on other sites
  • 0
tius Explorer

tius

Posted
Posted

Например


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>

<style type="text/css">
html, body {height:100%;}
body {
    margin: 0;
    padding: 0;   
}
html>body .minHeight{
    float: left;
    width: 0;
    height: 100%;
    overflow: hidden;
} 
.wrapper {
    min-height: 100% !important;
    height: 100% !important;
    width: 100%;
    margin: 0 auto;
    background: #c0c0c0;
    overflow: hidden;
}
* html .wrapper { height: 100%; overflow: visible; }
.header{
    height: 100px;
    background: #808080;
    text-align: center;
}
.right {
    float: right;
    width: 50%;
    background: #606060;
    text-align: center;
    height: 100%;
}
.left{
    float: left;
    width: 50%;
    background: #303030;
    text-align: center;
    height: 100%;
}
</style>
</head>
<body>

<div class="minHeight"></div>
<div class="wrapper">
    <div class="header">header</div>
    <div class="left">left</div> 
    <div class="right">right</div>
</div>

</body>
</html>

  • Like 1
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

psywalker

Тогда в ход идут извращения другие методы верстки.

В приведенном коде только пример отверстанной картинки (http://h1813090.stratoserver.net/files/share/1_4_2011/xXjLQlnbLEOgo52hvFGbQ.jpg)

Ааа, ну это и понятно. Но так ведь дела не делаются. Современному миру - современные решения :rolleyes:

Link to comment
Share on other sites
  • 0
tius Explorer

tius

Posted
Posted

Или вот еще вариант, с различными display на основе 'table':


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title></title>
</head>

<body>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
	border: none;
}
body, html {
	height: 100%;
	width: 100%;
}
.wrap {
	width: 100%;
	height: 100%;
	background: #f0f0f0;
	display: table;
}
.block1, .block2 {
	width: 50%;
	height: 100% !important;
	background: #909090;
	float: left;
	display: table-cell;
	text-align: center;
}
.block2 {
	float: right;
	background: #d0d0d0;
}
.header, .content {
	display: table-row;
	text-align: center;
}
.content {
	height: 100% !important;
}
.header {
	height: 200px;
}
</style>

<div class="wrap">
	<div class="header">header</div>
	<div class="content">
		<div class="block1">block 1</div>
		<div class="block2">block 2</div>
	</div>
</div>


</body>
</html>

Хорошо работает в ФФ и Хроме, плохо в Опере и ИЕ.

psywalker

Под каждый проект - своя резина.

Я показываю пример, а думать за других и верстать чужие макеты просто так - удовольствие сомнительное. :rolleyes:

  • Like 1
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
Хорошо работает в ФФ и Хроме, плохо в Опере и ИЕ.

Хорошо сказано...красота :rolleyes:

psywalker

Под каждый проект - своя резина.

Я показываю пример, а думать за других и верстать чужие макеты просто так - удовольствие сомнительное. ;)

А зачем показывать решение, от которых даже плясать не получиться? Смысл тогда?

Link to comment
Share on other sites
  • 0
swetlana Explorer

swetlana

Posted
Posted

Предложить вариант из <table></table> мне совесть не позволяет.

злая она, эта совесть.

Мне вот тоже не позволяет, в том числе не позволяет и применять подобные решения :rolleyes:

А потому приходится в отдельных случаях изворачиваться странными способами. Или отказываться от полной поддержки древних IE.

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

злая она, эта совесть.

Мне вот тоже не позволяет, в том числе не позволяет и применять подобные решения :rolleyes:

А потому приходится в отдельных случаях изворачиваться странными способами. Или отказываться от полной поддержки древних IE.

Ну и глупо.

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

кто бы спорил…

совесть — это глупо, да.

но отказаться от неё совесть не позволяет.

:rolleyes:

Правильно s0rr0w сказал всё таки, правильно, вот сколько с тобой общаюсь, всё больше это понимаю.

Link to comment
Share on other sites
  • 0
Simon Explorer

Simon

Posted
  • Author
Posted

спасибо ток проблема не пропала ( в блоке 2-3 хотелось бы еще пару блоков с высотой 100% (... просто есть фон с заливкой в форме шара и для верстки нуждаюсь в 3х дивах с высотой 100% ;)

структура типа такова:


<div id="centr_rezinovii">
    <div id="verhnya_4asti">
        <div id="nijniia_4asti"></div>
    </div>
</div>

centr_rezinovii - эт будет фон что растягивается 1пх

verhnya_4asti - первая половина фона

nijniia_4asti - нижняя половина %)

я все это отверстал на таблицах ток проблема в Опере и ИЕ... думал чет на дивах получиться но и тут на те :-/

Link to comment
Share on other sites
  • 0
Searcher Explorer

Searcher

Posted
Posted

Определитесь для себя, вы хотите, чтобы фон растягивался на всю высоту, т.е. создавалась иллюзия, что колонки на всю высоту, или реально нужно, чтобы колонки были растянуты до подвала?

Вот есть хорошие примерчики:

http://blog.sjinks.pro/css/209-cross-browser-liquid-three-column-layout-full-height/

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

http://vk.osvita.org.ua/footer.htm

http://softwaremaniacs.org/forum/web/348/

http://www.zakharov.ms/footer/

Вот хороший генератор шаблонов:

http://csstemplater.com/

Вот куча примеров шаблонов:

http://tjkdesign.com/articles/one_html_markup_many_css_layouts.asp

http://blog.html.it/layoutgala/

Вобщем, используйте интернет по полной ))

  • Like 1
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept