Почему высота моего элемента div не изменяется (только HTML)? - PullRequest
Новая
       21

Почему высота моего элемента div не изменяется (только HTML)?

0 голосов
/ 25 марта 2020

Я пытаюсь вставить [этот график фондового рынка] в свой блог. Я выбрал autosize: true, чтобы настроить ширину в соответствии с шириной сайта, но хочу установить фиксированную высоту (например, 500 пикселей).

Несмотря на то, что я много читал о stackoverflow и тестировал разные вещи, я могу не заставить его работать. Я попытался добавить style поля в элемент div, а также попытался добавить родительский div. Вот пример кода: 

<!DOCTYPE html>
<body>
<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container" style="min-height: 500px; height: 500px; width: 500px;">
  <div id="tradingview_b9e4a"></div>
  <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/SWB-LYYA/" rel="noopener" target="_blank"><span class="blue-text">LYYA Chart</span></a> by TradingView</div>
  <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
  <script type="text/javascript">
  new TradingView.widget(
  {
  "autosize": true,
  "symbol": "SWB:LYYA",
  "timezone": "exchange",
  "theme": "light",
  "style": "2",
  "locale": "en",
  "toolbar_bg": "#f1f3f6",
  "enable_publishing": false,
  "hide_top_toolbar": true,
  "hide_legend": true,
  "withdateranges": true,
  "range": "5d",
  "allow_symbol_change": true,
  "save_image": false,
  "container_id": "tradingview_b9e4a"
}
  );
  </script>
</div>
<!-- TradingView Widget END -->
</body>
</html>

Я ожидал / хотел, чтобы график был квадратным (500x500px), но полученный график всегда был действительно плоским, а высота не менялась - независимо от того, что я пытался:

enter image description here

Я хочу сделать это только в HTML, без дополнительных CSS файлов.

1 Ответ

1 голос
/ 25 марта 2020

Вам также нужно установить высоту элемента .tradingview_b9e4. первый ребенок .tradingview-widget-container; 

<div id="tradingview_b9e4a" style="height: 100%;"
...