1. дома
  2. Вопрос и ответ
  3. высота: 100% не работает в Internet Explorer

высота: 100% не работает в Internet Explorer

2013-05-29 2 views
21

У меня есть вопрос о CSS-свойстве height:100% в Internet Explorer.высота: 100% не работает в Internet Explorer

height:100% не работает в IE, но он работает в Firefox и Chrome.

HTML файла:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<html style="height:100%;"> 

<head> 
    <meta charset="utf-8" /> 
    <link rel="stylesheet" href="style.css" type="text/css" /> 
</head> 

<body> 
    <div id="menu_neu"> 
     <ul id="topNav"> 
      <li class="current"><a href="#section-1">SECTION 1</b></a> 
      </li> 
      <li><a href="#section-2">SECTION 2 </b></a> 
      </li> 
     </ul> 
    </div> 
    <div id="wrapper"> 
     <!--SECTION- 1 .....................................................................................................................................--> 
     <div class="section" id="section-1">SECTION - 1 
      <div style="height:100%;" id="intro"> 
       <div class="story"> 
        <div class="bg1"></div> 
        <div class="bg2"></div> 
        <div class="bg3"></div> 
        <div class="float-left" style="margin-top:120px; width:500px;"> 
         <h2>HEIGHT 100% works in Chrome and Firefox,<br> <b>but not in IE!</b></h2> 

         <div id="s1Pfeil1" style="padding-top:120px;padding-left:255px;"> <a href="#second" title="Next Section"><img src="images/icon_down_normal.png" alt="Next" /></a> 

         </div> 
         <!--/box-links--> 
        </div> 
        <!--/float-left--> 
       </div> 
       <!--./story--> 
      </div> 
      <!--/intro--> 
      <div style="height:100%;" id="second"> 
       <div class="story"> 
        <div class="bg1_2"></div> 
        <div class="bg2_2"></div> 
        <div class="bg3_2"></div> 
        <div class="float-right" style="margin-top:45px; width:500px;"> 
          <h2>HEIGHT 100% works in Chrome and Firefox,<br> <b>but not in IE!</b></h2> 

         <div id="s1Pfeil2" style="padding-top:200px;padding-left:225px;"> <a href="#intro" title="Before Section"><img src="images/icon_up_normal.png" alt="Next" /></a>&nbsp;&nbsp;</a> <a href="#third" title="Next Section"><img src="images/icon_down_normal.png" alt="Next" /></a></a>&nbsp;&nbsp;</a> 
         </div> 
         <!--/box-links1--> 
        </div> 
        <!--/float-right--> 
       </div> 
       <!--./story--> 
      </div> 
      <!--#second--> 
      <div id="third" style="height:100%;"> 
       <div class="story"> 
        <div class="bg1_3"></div> 
        <div class="bg2_3"></div> 
        <div class="bg3_3"></div> 
        <div class="float-left" style="margin-top:80px; width:500px;"> 
          <h2>HEIGHT 100% works in Chrome and Firefox,<br> <b>but not in IE!</b></h2> 

         <div id="s1Pfeil3" style="padding-top:200px;padding-left:225px;"> <a href="#second" title="Next Section"><img src="images/icon_up_normal.png" alt="Next" /></a> 

         </div> 
         <!--/box-links2--> 
        </div> 
        <!--/float-left--> 
       </div> 
       <!--.story--> 
      </div> 
      <!--#third--> 
     </div> 
     <!--/section1--> 
     <!--SECTION- 2 BRANDSTIFTER..................................................................................................................................--> 
     <div class="section" id="section-2">SECTION -2 
      <div id="intro_bs"> 
       <div class="story_bs"> 
        <div class="bg1_bs"></div> 
        <div class="bg2_bs"></div> 
        <div class="bg3_bs"></div> 
        <div class="float-left_bs" style="margin-top:50px; width:600px;"> 
          <h2>HEIGHT 100% works in Chrome and Firefox,<br> <b>but not in IE!</b></h2> 

         <div id="s2Pfeil1" style="padding-top:-50px;padding-left:305px;"> <a href="#second_bs" title="Next Section"><img src="images/icon_down_normal.png" alt="Next" /></a> 

         </div> 
         <!--/box-links--> 
        </div> 
        <!--/float-left_bs--> 
       </div> 
       <!--.story--> 
      </div> 
      <!--#intro--> 
      <div id="second_bs"> 
       <div class="story_bsc"> 
        <div class="bg1_2_bs"></div> 
        <div class="bg2_2_bs"></div> 
        <div class="bg3_2_bs"></div> 
        <div class="float-right_bs" style="margin-top:120px; width:500px;"> 
          <h2>HEIGHT 100% works in Chrome and Firefox,<br> <b>but not in IE!</b></h2> 

         <div id="s2Pfeil2" style="padding-top:80px;padding-left:305px;"><a href="#intro_bs" title="Next Section"><img src="images/icon_up_normal.png" alt="Next" /></a>&nbsp;&nbsp;<a href="#third_bs" title="Next Section"><img src="images/icon_down_normal.png" alt="Next" /></a> 
         </div> 
        </div> 
       </div> 
       <!--.story--> 
      </div> 
      <!--#second--> 
      <div id="third_bs"> 
       <div class="story_bsc"> 
        <div class="bg1_3_bs"></div> 
        <div class="bg2_3_bs"></div> 
        <div class="bg3_3_bs"></div> 
        <div class="float-right_bs" style="margin-top:120px; width:500px;"> 
          <h2>HEIGHT 100% works in Chrome and Firefox,<br> <b>but not in IE!</b></h2> 

         <div id="s2Pfeil3" style="padding-top:100px;padding-left:225px;"> <a href="#second_bs" title="Next Section"><img src="images/icon_up_normal.png" alt="Next" /></a> 

         </div> 
        </div> 
       </div> 
       <!--.story--> 
      </div> 
      <!--#third--> 
     </div> 
     <!--/section-2--> 
    </div> 
    <!--/wrapper--> 
    <div class="suche"> 
     <form class="search" action="" method="post"> 
      <label for="search-box">Search:</label> 
      <input id="search-box" type="text" name="search" onclick="search_bigger();" onblur="search_smaller();"> 
     </form> <a href="http://www.facebook.com/BrandortMarketingKommunikationsGmbh" title="Werde Fan von Brandort. auf Facebook" alt="Werde Fan von Brandort. auf Facebook" target="_blank"><div class="herz"></div></a><a href="images/icon_quicklinks_phone_hover_big.png" rel="lightbox" title="So erreichen Sie uns" alt="So erreichen Sie uns"><div class="telefon"></div></a> 

    </div> 
    <div class="css-panes"> 
     <div style="display: block;"></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
    </div> 
</body>

CSS Файл:

html{ 
    height:100%; 
} 

body{ 
    font-family: 'universal_light'; 
    margin: 0; 
    min-width: 980px; 
    padding: 0; 
    line-height:2em; 
    background-color: #f6aa27; 
    height: 100%; 

} 

p{ 
    margin: 0 0 20px 0; 
} 

p, ul{ 
    font-family:'universal_light'; 
    font-weight:normal; 
    font-size:16px; 
} 

img{ 
    border: 0; 
} 

h1, #pixels{ 
    font-family:"Museo 900", Verdana, serif; 
    font-size-adjust:0.40; 
    font-weight:700; 
    font-style:normal; 
} 

h2{ 
    font-family: 'universal_black'; 
    color:#000000; 
    font-size:30px; 
    font-weight:normal; 
} 

#wrapper{ 
    height: 100%; 
} 

#header h1, #pixels{ 
    color: #48941A; 
} 



#nav{ 
    list-style: none; 
    position: fixed; 
    right: 20px; 
} 

#nav li{ 
    margin: 0 0 15px 0; 
} 

#nav_bs{ 
    list-style: none; 
    position: fixed; 
    right: 20px; 
} 

#nav_bs li{ 
    margin: 0 0 15px 0; 
} 

#nav_bsa{ 
    list-style: none; 
    position: fixed; 
    right: 20px; 
} 

#nav_bsa li{ 
    margin: 0 0 15px 0; 
} 

#header, #intro, #second{ 
    width: 100%; 
} 



/*hier wurde "fix" nach der "no-repeat" gelöscht*/ 
#intro{ 
    background-color:#f6aa27; 
    margin: 0 auto; 
    padding: 0; 
    height: 1200px; 
    width:100%; 
    border-style:solid; 
    border-width:5px; 

} 



/*hier wurde "fix" nach der "no-repeat" gelöscht*/ 
#intro .bg1{ 

    width: 900px; 
    position: absolute; 
    height: 900px; 
    margin: 0 auto; 
    padding: 0; 
    margin-top: -26px; 
    margin-left: 66px; 

} 
/*hier wurde "fix" nach der "no-repeat" gelöscht*/ 
#intro .bg2{ 

    width: 900px; 
    position: absolute; 
    height: 900px; 
    margin: 0 auto; 
    padding: 0; 

} 
#intro .bg3{ 
    background: url(images/kohle.png) 50% 0 no-repeat fixed; 
    width: 1000px; 
    position: absolute; 
    height: 900px; 
    margin: 0 auto; 
    padding: 0; 

} 

#second{ 
    background:url(images/bg1.jpg) 50% 0 no-repeat; 
    background-color:#f6aa27; 
    color: #D3D3D3; 
    height: 100%; 
    min-height: 100%; 
    margin: 0 auto; 
    padding: 0; 
    overflow: hidden; 
    border-style:solid; 
    border-width:5px; 
} 

#section-2{ 
background-color:#D3D3D3; 
} 

#second .bg1_2{ 
    background:url(images/second/feurig.png) 50% 0 no-repeat; 
    width: 900px; 
    position: absolute; 
    height: 900px; 
    margin: 0 auto; 
    padding: 0; 
    margin-left: 143px; 
    margin-top: -10px; 

} 

#second .bg2_2{ 
    background:url(images/second/handschrift.png) 50% 0 no-repeat; 
    width: 900px; 
    position: absolute; 
    height: 900px; 
    margin: 0 auto; 
    padding: 0; 

} 

#second .bg3_2{ 
    background:url(images/second/brandeisen.png) 50% 0 no-repeat fixed; 
    width: 900px; 
    position: absolute; 
    height: 100%; 
    margin: 0 auto; 
    padding: 0; 

} 


#third{ 
    background:url(images/bg1.jpg) 50% 0 no-repeat; 
    background-color:#f6aa27; 
    color: #000000; 
    height: 100%; 
    min-height: 100%; 
    margin: 0 auto; 
    padding: 0; 
    overflow: hidden; 
     border-style:solid; 
    border-width:5px; 
} 

#third .bg1_3{ 
    background:url(images/third/handschrift.png) 50% 0 no-repeat; 
    width: 900px; 
    position: absolute; 
    height: 900px; 
    margin: 0 auto; 
    padding: 0; 

} 
#third .bg2_3{ 
    background:url(images/third/feurig.png) 50% 0 no-repeat; 
    width: 900px; 
    position: absolute; 
    height: 900px; 
    margin: 0 auto; 
    padding: 0; 
} 

#third .bg3_3{ 
    background:url(images/third/seil.png) 50% 0 no-repeat fixed; 
    width: 900px; 
    position: absolute; 
    height: 900px; 
    margin: 0 auto; 
    padding: 0; 
} 

#fifth{ 
    background: #ccc; 
    height: 400px; 
    margin: 0 auto; 
    padding: 40px 0 0 0; 
} 



#header, #intro_bs, #second_bs{ 
    width: 100%; 
} 

#intro_bs{ 
    background:url(images/bg2.jpg) 50% 0 no-repeat; 
    background-color:#c9cacc; 
    color: #000000; 
    height: 900px; 
    margin: 0 auto; 
    padding: 0; 
     border-style:solid; 
    border-width:5px; 

} 

#intro_bs .bg1_bs{ 
    background:url(images/intro_bs/mitarbeiter.png) 50% 0 no-repeat; 
    width: 900px; 
    position: absolute; 
    height: 900px; 
    margin: 0 auto; 
    padding: 0; 

} 

#intro_bs .bg2_bs{ 
    background:url(images/intro_bs/feurig.png) 50% 0 no-repeat; 
    width: 900px; 
    position: absolute; 
    height: 900px; 
    margin: 0 auto; 
    padding: 0; 

} 
#intro_bs .bg3_bs{ 
    background:url(images/intro_bs/handschrift.png) 50% 0 no-repeat; 
    width: 900px; 
    position: absolute; 
    height: 900px; 
    margin: 0 auto; 
    padding: 0; 
} 

#second_bs{ 
    background:url(images/bg2.jpg) 50% 0 no-repeat; 
    background-color:#c9cacc; 
    color: #000000; 
    height: 950px; 
    margin: 0 auto; 
    padding: 0; 
    overflow: hidden; 
     border-style:solid; 
    border-width:5px; 
} 

#second_bs .bg1_2_bs{ 
    background:url(images/second_bs/feurig.png) 50% 0 no-repeat; 
    width: 900px; 
    position: absolute; 
    height: 900px; 
    margin: 0 auto; 
    padding: 0; 

} 

#second_bs .bg2_2_bs{ 
    background:url(images/second_bs/handschrift.png) 50% 0 no-repeat; 
    width: 900px; 
    position: absolute; 
    height: 900px; 
    margin: 0 auto; 
    padding: 0; 

} 

#second_bs .bg3_2_bs{ 
    background:url(images/second_bs/steffen.png) 50% 0 no-repeat; 
    width: 900px; 
    position: absolute; 
    height: 950px; 
    margin: 0 auto; 
    padding: 0; 
    margin-left: -121px; 


} 


#third_bs{ 
    background:url(images/bg2.jpg) 50% 0 no-repeat; 
    background-color:#c9cacc; 
    color: #000000; 
    height: 950px; 
    margin: 0 auto; 
    padding: 0; 
    overflow: hidden; 
     border-style:solid; 
    border-width:5px; 
} 

#third_bs .bg1_3_bs{ 
    background:url(images/third_bs/feurig.png) 50% 0 no-repeat; 
    width: 900px; 
    position: absolute; 
    height: 900px; 
    margin: 0 auto; 
    padding: 0; 

} 
#third_bs .bg2_3_bs{ 
    background:url(images/third_bs/handschrift.png) 50% 0 no-repeat; 
    width: 900px; 
    position: absolute; 
    height: 900px; 
    margin: 0 auto; 
    padding: 0; 

} 
#third_bs .bg3_3_bs{ 
    background:url(images/third_bs/mike.png) 50% 0 no-repeat; 
    width: 900px; 
    position: absolute; 
    height: 950px; 
    margin: 0 auto; 
    padding: 0; 
    margin-left: -121px; 
    margin-top: -287px; 
} 




.story{ 
    margin: 0 auto; 
    min-width: 980px; 
    overflow: auto; 
    width: 980px; 

} 

.story .float-left, .story .float-right{ 
    padding: 100px 0 0 0; 
    position: relative; 
    width: 350px; 
} 


.linkp1 a { 
    background:url('images/brandort_norm.gif') 0 0 no-repeat fixed; 
    /*height: 12px; 
    width: 95px;*/ 
    display: block; 
    z-index:11111; 
} 

.linkp1 a:hover { 
    background:url('images/brandort_hover.gif') 0 0 no-repeat fixed; 
} 


.linkp2 a { 
    background:url('images/brandstifter_norm.gif') no-repeat fixed; 
    /*height: 12px; 
    width: 95px;*/ 
    display: block; 
    z-index:11111; 
} 

.linkp2 a:hover { 
    background:url('images/brandstifter_hover.gif') no-repeat fixed; 
} 

.linkp3 a { 
    background:url('images/brandsaetze_norm.gif') no-repeat fixed; 
    /*height: 12px; 
    width: 95px;*/ 
    display: block; 
    z-index:11111; 
} 

.linkp3 a:hover { 
    background:url('images/brandsaetze_hover.gif') no-repeat fixed; 
} 

.linkp4 a { 
    background:url('images/brandschaetze_norm.gif') no-repeat fixed; 
    /*height: 12px; 
    width: 95px;*/ 
    display: block; 
    z-index:11111; 
} 

.linkp4 a:hover { 
    background:url('images/brandschaetze_hover.gif') no-repeat fixed; 
} 

.linkp5 a { 
    background:url('images/brandpunkt_norm.gif') no-repeat fixed; 
    /*height: 12px; 
    width: 95px;*/ 
    display: block; 
    z-index:11111; 
} 

.linkp5 a:hover { 
    background:url('images/brandpunkt_hover.gif') no-repeat fixed; 
} 




#menu_neu { 
height: 40px; 
width: 1200px; 
text-align: center; 
line-height:1em!important; 
position: fixed; 
left: 40%; 
width: 640px; 
z-index: 10000; 
} 

ul#topNav{ 
    margin-top:51px; 
    margin-left: -218px; 
    color:#000000; 
} 

ul#topNav li { 
    list-style: none; 
    display: inline; 
    margin: 0; padding: 0; 
    margin-top: 50%; 
} 

ul#topNav a, ul#topNav span { 
    float: left; 
    margin-right: 0.4em; 
    margin-left: 0.1em; 
    padding: 0.2em 1em; 
    text-decoration: none; 
    color:#000000; 
    font-size:14px; 
} 

* html ul#topNav a, * html ul#topNav span { /* Korrektur fuer IE 5.x */ 
    width: 8em; 
    wi\dth: 6em; 
} 

ul#topNav a:hover, ul#topNav span { 
    color:#000000; 
    font-size:14px; 
} 

ul#topNav a:active { 
    color:#000000; 
    font-size:14px; 
} 

ul#topNav div { 
    clear: left; 
} 

#topNav .current a { 
    color:#F45D32; 
}

Демо: http://ealtinel.com/height/

Как я могу заставить его работать в IE?

источник

2013-05-29 aldimeola1122

+0

Ваш первый' ' должны зайти внутрь' ', как хорошо! – Sirko

+0

Попробуйте высоту: авто; –

+0

Я изменил, но он не работает :( – aldimeola1122

ответ

0

Я столкнулся с такой же проблемой с одним из моих проектов, но не смог найти решение, поскольку width: 100% работал, но не height. Поэтому я использовал небольшой трюк, чтобы обернуть мою страницу внутри div и обновить высоту div с помощью javascript.

windowHeight = window.innerHeight 
document.getElementById("mainContainer").setAttribute('style',"height:"+windowHeight+";");

И связал это с событием.

источник

2013-05-29 11:12:16 abhishekgarg

11

Для использования height: 100% родительский контейнер должен иметь фиксированную высоту.

Так, например, в то время как это должно работать:

<div style="height: 400px;"> 
    <div style="height: 100%; background: red; float: left; width: 200px;"> 
     Left Column 
    </div> 
    <div style="height: 100%; margin-left: 210px;"> 
     Right Column 
    </div> 
</div>

Следующая не будет работать:

<div style="height: 100%;"> 
    --- same code 
</div>

Одним из способов достижения фиксированной высоты, когда вы не знаете, высота родителя использует position: absolute; ,

<div style="position: relative;"> 
    <div style="position: absolute; left: 0; top: 0; bottom: 0; width: 200px; background: red;"> 
     Left Column 
    </div> 
    <div style="margin-left: 210px;"> 
     Right Column 
    </div> 
</div>

В противном случае вы можете использовать javascript, как указано в ответе. Но я предпочитаю чистые решения CSS.

Check here for a live fiddle.

Надежда, что помогает.

источник

2013-05-29 11:27:57

+0

Можете ли вы сказать мне, что я делаю неправильно http://www.ealtinel.com/height – aldimeola1122

+0

@ aldimeola1122 жаль, что я пропустил ваш комментарий ... Я просто видел это, но ссылка мертва. –

+0

@SavasVedova не работает в IE6 :( –

30

В IE, для того чтобы элемент имел height:100%;, все родительские элементы должны иметь height:100%;. Любой разрыв в «цепочке» заставит IE игнорировать все.

Он должен работать, если ваш CSS включает в себя следующее:

html,body { height:100%; } 
#wrapper { height:100%; } 
.section { height:100%; }

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

источник

2013-05-29 11:53:33 snumpy

+0

http://www.ealtinel.com/height/ не :) – aldimeola1122

+0

@ aldimeola1122 вам нужно положить '#wrapper {height: 100%; } 'назад в – snumpy

2

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

html,body, \\ this has to go to every element you want to have a height 100% 
{ 
    height:100%; 
}

У меня тоже есть кое-что хорошее

window.onload=function(){ 
if(navigator.appName == "Microsoft Internet Explorer"){ \\ to detect if the browser used by the client is IE 
winHight = window.innerHeight 
document.getElementById("mainContainer").setAttribute('style',"height:"+winHeight+";"); 
} 
}

источник

2013-05-29 14:10:52

-1

Я попробовал несколько вещей, и это, кажется, решение:

Добавьте следующий мета-тег в головной части вашего html-документ:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10" >

Кажется, что IE автоматически включает режим совместимости для (IE) Версия 7. Этот метатег заставляет IE устанавливать режим совместимости для версии 10 IE. Это решение работает только в IE версии 10 или выше.

Удачи!

источник

2016-11-10 03:22:15

-1

Я знаю, что это сообщение устарело, но оно может быть полезно некоторым людям. У меня была проблема с изображением на IE. Изображение имеет свойство «max-width: 100%», и оно отлично работает на Chrome, но не на IE.

То, что я просто сделал с изображением, имеет ширину и максимальную ширину. Было бы что-то вроде:

img.logo { 
     width:100%; 
     max-width:1600px; 
    }

И это сработало для меня: D`

`

источник

2017-04-19 19:49:44 Bano

+1

Ваш« ответ »не имеет никакого отношения к вопросу. Если что-нибудь, это комментарий и входит в раздел комментария в вопросе. Даже тогда это не в тему. – Rob

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

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