Вопросы Теги

Получить div для заполнения всей страницы для отдельных фоновых изображений [дублировать]

Расположение тегов Xml в Web.config важно

Сначала 

<configSections>
    <!-- For more information on Entity Framework configuration, visit http://go.microsoft.com/fwlink/?LinkID=237468 -->
    <section name="entityFramework" type="System.Data.Entity.Internal.ConfigFile.EntityFrameworkSection, EntityFramework, Version=6.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" requirePermission="false" />
</configSections>

Aftet 

<connectionStrings>
    <add name="SqlConnectionString"
         connectionString="Data Source=.;Initial Catalog=TestDB; Trusted_Connection=True;"
         providerName="System.Data.SqlClient" />
  </connectionStrings>
197
задан Michael_B 4 February 2017 в 14:31
поделиться

9 ответов

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

Итак, вы указали все свои высоты элементов, кроме <html>, поэтому вам следует добавить следующее: 

html {
    height: 100%;
}

И ваш код должен 

* { padding: 0; margin: 0; }
html, body, #fullheight {
    min-height: 100% !important;
    height: 100%;
}
#fullheight {
    width: 250px;
    background: blue;
}
<div id=fullheight>
  Lorem Ipsum        
</div>

JsFiddle пример .

290
ответ дан Madara Uchiha 19 August 2018 в 10:46
поделиться
  • 1
    Хорошо, так что это может заставить меня выглядеть невероятно глупо, но whatever : вы хотите сказать, что <html> является фактическим элементом - точно так же, как <p> или <img />? Я думал, что единственной целью <html> было определение начала и конца HTML-документа. Я имею в виду, я думал, что это было там, а не для макета, но именно так браузер знает, какой тип документа он смотрит? Я полностью взорван. – jay_t55 17 May 2013 в 04:34
  • 2
    @Joey: HTML является фактическим элементом. Вы можете стилизовать его с помощью CSS, связать события с ним в JavaScript, добавить в него классы и идентификаторы, и он появится в DOM. Браузер будет принимать HTML-документ даже без тега <html> и даже без элементов <head> или <body>. Однако спецификации HTML считают, что тег <html> является обязательным. Короче говоря, да, это полноценный элемент, как и все другие элементы HTML. – Madara Uchiha♦ 17 May 2013 в 09:52
  • 3
    @SecondRikudo: Нет, тэг <html> является необязательным в соответствии со спецификациями (например, HTML4 и HTML5). И да, элемент создается в любом случае. – Robert Siemer 15 July 2014 в 13:08
  • 4
    hmmm ... для меня единственным способом это было установить как html, так и body как height: 100% (а также, конечно, конкретный div я хочу наследовать 100% -ную высоту) – james 13 January 2015 в 07:34
  • 5
    @james Да, все родители должны иметь известную высоту. – Madara Uchiha♦ 13 January 2015 в 07:54

Вы должны попробовать с родительскими элементами: 

html, body, form, main {
    height: 100%;
}

Тогда этого будет достаточно: 

#s7 {
   height: 100%;
}
5
ответ дан HQtunes.com 19 August 2018 в 10:46
поделиться

Поскольку никто не упомянул об этом.

Современный подход:

. В качестве альтернативы для установки высоты элемента html / body на 100%, вы могли бы также использовать длину в процентах в окне просмотра:

5.1.2. Длины в процентах по видовому экрану: единицы измерения «vw», «vh», «vmin», «vmax»

Длина в процентах в окне просмотра зависит от размера исходного содержащего блока. Когда высота или ширина исходного содержащего блока изменяется, они соответственно масштабируются.

В этом случае вы можете использовать значение 100vh (которое является высотой области просмотра) - (пример) 

body {
    height: 100vh;
}

Настройка min-height также работает. (пример) 

body {
    min-height: 100vh;
}

Эти устройства поддерживаются в большинстве современных браузеров - поддержка находится здесь .

103
ответ дан Josh Crozier 19 August 2018 в 10:46
поделиться
  • 1
    Я не вижу в этом никакой пользы. Разве это не создает дополнительную работу для браузера, которая должна рассчитать все, что связано с окном просмотра браузера? Размер видового экрана кажется полезным только тогда, когда вы хотите на самом деле определить что-то, связанное с высотой браузера. – Robert Went 8 January 2016 в 15:17
  • 2
    @RobertWent Есть преимущества. Например, height: 100% работает только в том случае, если родительский элемент имеет определенную высоту. Конечно, в некоторых случаях, когда родитель элемента не имеет определенной высоты, и процентные единицы в окне просмотра разрешают это. Другими словами, если у вас есть глубоко вложенный элемент, вы можете просто установить 100vh, и он будет иметь высоту 100% браузера. Вы могут не видеть никаких преимуществ, но я был во многих случаях, когда они были единственным решением. Эти единицы могут быть не столь полезными для корневых элементов, таких как html / body, но, тем не менее, это альтернатива – Josh Crozier 8 January 2016 в 15:33
  • 3
    Но мы говорим о элементе тела, а не о глубоко вложенном элементе. Существует только один возможный родительский элемент html. Вот почему я упомянул, что я не вижу никакой пользы, и, возможно, это хуже, чем установка 100%. В твоем комментарии ничего не сказано, чтобы заставить меня худеть. Просто потому, что что-то новое, это не делает его лучше. Это, однако, альтернатива. – Robert Went 8 January 2016 в 22:37
  • 4
    Определение viewport-percentage lengths вводит в заблуждение. На самом деле, это просто размер окна просмотра, то есть окна браузера в большинстве случаев. – B-GangsteR 17 November 2017 в 23:46
  • 5
    Проблема с этим подходом заключается в том, что iPhones исключает адресную строку и нижнюю навигацию с высоты представления, что означает, что body { height: 100vh } будет иметь полосу прокрутки при начальной загрузке страницы. – BHOLT 8 February 2018 в 22:08

Если вы абсолютно позиционируете элементы внутри div, вы можете установить верхнюю и нижнюю части прокладки на 50%.

Так что-то вроде этого: 

#s7 {
    position: relative;
    width:100%;
    padding: 50% 0;
    margin:auto;
    overflow: hidden;
    z-index:1;
}
0
ответ дан Keith Brown 19 August 2018 в 10:46
поделиться
  • 1
    Я не вижу, как это может работать, поскольку 50% относится к ширине не к высоте содержащего элемента, или мне что-то здесь не хватает? – DrLightman 17 October 2017 в 12:40

Это может быть не идеальным, но вы всегда можете сделать это с помощью javascript. Или в моем случае jQuery 

<script>
var newheight = $('.innerdiv').css('height');
$('.mainwrapper').css('height', newheight);
</script>
2
ответ дан oBo 19 August 2018 в 10:46
поделиться
  • 1
    Никогда не рекомендуется использовать javascript, если достаточно одного css. – Bosworth99 13 August 2014 в 18:41
  • 2
    Почему даже делать что-то подобное и усложнять его больше, чем должно быть? Я не понимаю некоторых ответов lol ... – CapturedTree 3 February 2018 в 00:24

Вам также необходимо установить высоту 100% на элемент html: 

html { height:100%; }
21
ответ дан shanethehat 19 August 2018 в 10:46
поделиться

В качестве альтернативы, если вы используете position: absolute, тогда height: 100% будет работать нормально.

15
ответ дан Steve Tauber 19 August 2018 в 10:46
поделиться
  • 1
    Было бы замечательным решением, если бы я не использовал flexbox для создания моего макета. : / – Landon Call 20 April 2017 в 23:12
  • 2
    Не забудьте установить width:100%; и родительский position:relative;. – Kai Noack 18 May 2018 в 21:01

В источнике страницы я вижу следующее: 

<div class="holder"> 
    <div id="s7" style="position: relative; width: 1366px; height: 474px; overflow: hidden;">

Если вы поместите значение высоты в тег, он будет использовать это вместо высоты, определенной в файле css.

0
ответ дан Steven 19 August 2018 в 10:46
поделиться
  • 1
    Это странно, потому что это то, что я вижу в источнике страницы: & lt; div class = & quot; держатель & quot; & gt; & gt; & Lt; & тр GT; & Lt; & тд GT; & lt; div id = "s7" & gt; & gt; & lt; div id = "posts" & gt; & gt; – Earl Larson 13 August 2011 в 11:35
  • 2
    Хорошо, хотя я не знаю, как вы получили свой выше код, я вошел и изменил & lt; div id = & quot; s7 & quot; & gt; & gt; к & lt; div id = "s7" стиль = & Quot; высота: 100%; & Quot; & GT; и это сработало. Может быть, это что-то скрывает от меня? В любом случае спасибо! – Earl Larson 13 August 2011 в 11:41

, если вы хотите, например, левый столбец (высота 100%) и контент (высота авто), вы можете использовать абсолютное значение: 

#left_column {
    float:left;
    position: absolute;
    max-height:100%;
    height:auto !important;
    height: 100%;
    overflow: hidden;

    width : 180px; /* for example */
}

#left_column div {
    height: 2000px;
}

#right_column {
    float:left;
    height:100%;
    margin-left : 180px; /* left column's width */
}

в html: 

  <div id="content">
      <div id="left_column">
        my navigation content
        <div></div>
      </div>

      <div id="right_column">
        my content
      </div>
   </div>
4
ответ дан YellowMart 19 August 2018 в 10:46
поделиться