iframe height %

bioz00 · March 29, 2011

Здрасте! Как заставить ифрейм растягиваться по высоте ячейки? Без явы.

<!DOCTYPE html>
<head>
  <style type="text/css">

body {  
	margin:0; 
	padding:0; 
	width:100%;  
	height:100%;  
	position:absolute; 
}
  </style>
</head>


<html>
<body>
   <table height="100%" width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="green">
      <tr height="100px">
         <td> </td>
      </tr>
      <tr>
         <td bgcolor="yellow">
            <iframe width="100%" height="100%" src="http://google.com/"></iframe>
         </td>
      </tr>
      <tr height="50px">
         <td> </td>
      </tr>
   </table>
</body>
</html>

Зы. если выпилить доктайп, то все норм, но это не катит.

tius · March 29, 2011


         <td bgcolor="yellow" style="height:100%;">
            <iframe width="100%" height="100%" src="http://google.com/"></iframe>
         </td>

SelenIT · March 29, 2011

Единственный вариант, который могу предложить — position:absolute;top:100px;bottom:50px.

bioz00 · March 29, 2011

tius, помогло :devil: хотя снизу торчит небольшой огрызок.

А в чем секрет? Ведь ячейка и так занимает всю высоту.

SelenIT, в этом решении теряется нижняя ячейка, по крайней мере в жОпере

psywalker · March 29, 2011

Секунду, если я не ошибаюсь, то в ячейках не пашет позиционирование.

bioz00 · March 29, 2011

psywalker, в Опере кстати пашет =)

хотя в данном случае я применял не к ячейки а к фрейму.

Edited March 29, 2011 by bioz00

SelenIT · March 29, 2011

Да, я извиняюсь, поторопился. В ячейке, да с height=100%, без дополнительной обертки действительно не работает. Вот так вроде работает (по крайней мере, в последних версиях):

<!DOCTYPE html>
<head>
  <style type="text/css">

body {  
        margin:0; 
        padding:0; 
        width:100%;  
        height:100%;  
        position:absolute; 
}
div {
        position:absolute;
		top:100px;
		bottom:50px;
		width:100%;
}
  </style>
</head>


<html>
<body>
   <table height="100%" width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="green">
      <tr height="100px">
         <td> </td>
      </tr>
      <tr>
         <td bgcolor="yellow">
			<div>
            <iframe width="100%" height="100%" frameborder="0" src="http://google.com/"></iframe>
			</div>
         </td>
      </tr>
      <tr height="50px">
         <td> </td>
      </tr>
   </table>
</body>
</html>

Правда, при таком подходе сама таблица оказывается не сильно нужна... :devil:

psywalker · March 29, 2011

Да, я извиняюсь, поторопился. В ячейке, да с height=100%, без дополнительной обертки действительно не работает. Вот так вроде работает (по крайней мере, в последних версиях):

<!DOCTYPE html>
<head>
  <style type="text/css">

body {  
        margin:0; 
        padding:0; 
        width:100%;  
        height:100%;  
        position:absolute; 
}
div {
        position:absolute;
		top:100px;
		bottom:50px;
		width:100%;
}
  </style>
</head>


<html>
<body>
   <table height="100%" width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="green">
      <tr height="100px">
         <td> </td>
      </tr>
      <tr>
         <td bgcolor="yellow">
			<div>
            <iframe width="100%" height="100%" frameborder="0" src="http://google.com/"></iframe>
			</div>
         </td>
      </tr>
      <tr height="50px">
         <td> </td>
      </tr>
   </table>
</body>
</html>

Правда, при таком подходе сама таблица оказывается не сильно нужна... :devil:

Ну дык. Это выходит, что мы всех обманули

bioz00 · March 29, 2011

SelenIT, работает ровно во всех браузерах и даже в осле :devil: Спасибо большое.

extrim-nikola · September 23, 2011

Всем доброго, времени суток! Вопрос возник в следующем, возможно ли как то растянуть iftame на 100% по содержимому средствами css, без js?

sigma77 · September 23, 2011

extrim-nikola,

Нет.

Sign In

iframe height %

Question

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information