为什么我的 div 元素的高度没有改变（仅 HTML）？

Question

我正在尝试将 [这张股市图表] 嵌入到我的博客中。我选择 autosize: true，根据网站宽度调整宽度，但想设置固定高度（例如 500 像素）。

尽管如此，我在 Whosebug 上阅读了很多内容并测试了不同的东西，但我无法让它工作。我尝试在 div 元素中添加 style 字段，还尝试添加父元素 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>

我 expected/wanted 绘图是方形的 (500x500px)，但生成的图表总是非常平坦，高度不会改变 - 无论我尝试什么：

我只想在 HTML 中执行此操作，不需要额外的 CSS 个文件。

Answer 1

您还需要设置 .tradingview_b9e4 元素的高度。 .tradingview-widget-container 的第一个 child；

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

为什么我的 div 元素的高度没有改变（仅 HTML）？

Why does the height of my div element not change (HTML only)?

html

css

height

responsive-design