1. дома
  2. Вопрос и ответ
  3. Установите высоту элемента на высоту экрана - Angular2

Установите высоту элемента на высоту экрана - Angular2

2016-12-05 9 views
1

Я пытаюсь установить высоту элемента div на высоту экрана за вычетом фиксированного количества пикселей.Установите высоту элемента на высоту экрана - Angular2

Я создаю одностраничное приложение с угловым и прямо сейчас, когда оно находится в зачаточном состоянии. В настоящее время эта страница состоит из одной строки заголовка, которая имеет фиксированную высоту 24px.

Непосредственно под этим заголовком находится компонент <app-root></app-root>, который автогенерируется угловым, который содержит один div, <div id="work-area"><div>.

Что я хочу сделать, так это то, что это #work-area div простирается от нижней части заголовка до нижней части экрана, что-то вроде screen.height - 24px, если это должно было быть сделано в чистом javascript.

Я не уверен, как это сделать. Я пробовал несколько вещей до сих пор:

  • Вставить скрипт в угловой HTML-шаблон, который содержит код javascript для установки ширины. Это не сработало, потому что угловые не поддерживают встроенные теги скриптов.
  • Я попытался установить высоту с использованием чистого CSS, я не мог заставить это работать, и я уверен, что чистый CSS не достигнет этой цели, но если это произойдет, это будет предпочтительный метод.
  • Наконец, я посмотрел директиву атрибута ngStyle, но для этого требуется чистый CSS, а не javascript, поэтому я столкнулся с той же проблемой, что и выше.

Ниже приведены мои файлы упаковывают это делает проблему яснее:

//app-root component 
import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: '<div id="work-area"></div>', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    title = 'app works!'; 
}

index.html

<!doctype html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>WorkspacePrototype</title> 
    <base href="/"> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="icon" type="image/x-icon" href="favicon.ico"> 
</head> 
<body> 

    <div class="overflowing-bar"> 
     <div id="header"> 

     </div> 
    </div> 


    <app-root>Loading...</app-root> 
</body> 
</html>

глобальный styles.css

body, html { 
    width: 100vw; 
    height: 100vh; 
    margin: 0; 
    padding: 0; 
} 

.overflowing-bar { 
    overflow: hidden; 
} 

#header/*, #footer*/ { 
    width: inherit; 
    height: 24px; 
    margin: 0 auto; 
    background-color: blue; 
}

источник

2016-12-05 JavascriptLoser

ответ

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

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