min height min width not working on cordova

Я пытаюсь кордову, и я забыл больше всего о моих прошлых знаниях по html и css ... но я хотел создать простую 3-div-макет, каждый 33% высоты и 100% ширины внутри контейнера. вот мой HTML:min height min width not working on cordova

<body> 
     <div class="container"> 
       <div class="ctn1"> 
       <h2>ddd</h2> 
       </div> 
       <div class="ctn2"> 
       </div>  
       <div class="ctn3"> 
       </div>  
      </div> 
     </div> 
     <script type="text/javascript" src="cordova.js"></script> 
     <script type="text/javascript" src="js/index.js"></script> 
    </body>

и мой CSS:

body{ 
    height: 100%; 
    min-height: 100%; 

} 

.container{ 

    height:100%; 
    width:100%; 

} 
.ctn1{ 
    min-height: 33%; 
    min-width: 100%; 
    background-color: red; 
} 
.ctn2{ 
    min-height: 33%; 
    min-width: 100%; 
    background-color: yellow; 
} 
.ctn3{ 
    min-height: 33%; 
    min-width: 100%; 
    background-color: blue; 
}

фон показывает только с текстом внутри ... спасибо

источник

2015-10-01 Lorenzo

потому, что мин-высота не работает в процентах. попробуйте в пикселях или em. –

-2

Остальные 2 дивы не будет отображаться без какого-либо контента в Если вам это нужно, попробуйте добавить в неразрывное пространство (ответ найден here)

Так что ваш html должен выглядеть примерно так

<body> 
    <div class="container"> 
      <div class="ctn1"> 
      <h2>ddd</h2> 
      </div> 
      <div class="ctn2"> 
      <h2>&nbsp;</h2> 
      </div>  
      <div class="ctn3"> 
      <h2>&nbsp;</h2> 
      </div>  
     </div> 
    </div> 
    <script type="text/javascript" src="cordova.js"></script> 
    <script type="text/javascript" src="js/index.js"></script> 
</body>

источник

2015-10-01 08:03:11 Jsmith2800

Это хак и не решает проблему с высотой. Кроме того, div не требует, чтобы контент был видимым, есть лучшие способы использования CSS. –

Наследование высоты всегда немного сложнее в CSS.

Необходимо указать html и body 100% высоты и удалить их по умолчанию. Кроме того, убедитесь, что марка по умолчанию h2 остается внутри контейнера, создавая ваши контейнеры overflow: hidden.

Here's your updated JSFiddle

источник

2015-10-01 08:06:52

-1

Если хочет эти дивы 33% ширины с некоторой высоты, чем использовать этот CSS:

body{ 
    height: 100%; 
    min-height: 100%; 

} 

.container{ 

    height:100%; 
    width:100%; 
    clear: both; 
    overflow: hidden; 

} 
.ctn1{ 
    min-height: 200px; 
    width: 33%; 
    float:left; 
    background-color: red; 
} 
.ctn2{ 
    min-height: 200px; 
    width: 33%; 
    float:left; 
    background-color: yellow; 
} 
.ctn3{ 
    min-height: 200px; 
    width: 33%; 
    float:left; 
    background-color: blue; 
}

источник

2015-10-01 08:08:58

Высота 33% не widht – Lorenzo

% не работает, и я не хочу устанавливать px, так как я работаю с кордорой и многими размерами устройства ... – Lorenzo

min height min width not working on cordova

ответ

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