vwを使った場合のheightの「狭め方」

Question

いつもお世話になっております。

レスポンシブデザイン前提での質問です。

画面の横幅を広げると文字が横に広がり、文章に必要なエリアが縦に狭くなることから
それに応じてheightの指定を狭めたいと思っています。
が、適したCSSの指定方法がわからず・・・

そもそもCSSだけで可能ですか？
どうしてもheighを指定しないといけない状態で困っています。

どなたかわかる方がいらっしゃったらご教授頂けないでしょうか。
よろしくお願い致します。

【1/7 10:33追記】

height: calc();
で指定できるのでは？とひらめき、実験しようとしています。

---

【1/7 10:39追記】

以下のhogeは画面幅が狭いと改行が入り、liの要素は縦に伸びますよね。
改行が入らないとliの要素は一行分だけになります。
liはブロック要素なのでheightの指定はしなくていいのは理解しているんですが、
システム上、どうしても指定したいのです。

画面に応じて高さを指定する
となると
vwを使うのかなと考えたのですが、
vwは画面幅*nとなりますよね。
vwに応じてheight狭めていきたいのですが、その方法に立ち止まっていました。

calcを使うのかな
height: -nvw;
min-height: px;
でマイナス指定していくとか・・・
考えてる段階でまだ実験できてません。
<div>
<ul>
<li>hogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehoge</li>
<li>hogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehoge</li>
<li>hogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehoge</li>
</ul>
</div>

Comments

[kyoya0819]

良くわかりません。現状のコード等を追記してください。

[samiA]

asuchi0819さん
いつも有難うございます。
文字だけで伝わると思ってしまいました。

実際のコードは中にその他の要素いろいろあるんですが
こちらでご確認頂けますでしょうか。
お手数おかけします。

[kyoya0819]

画面を狭めても現状の文字列だと改行は入らないはずです。

[kyoya0819]

もし、
* {
margin: 0;
pading: 0
}
的なのを入れていいなら方法はあります、

[samiA]

すみません、自己解決しました。
お手数おかけしました。

[makosankibu]

display:inline を指定するだけな気がするのですが...
またはメディアクエリでは解決しませんか?

Answer 1

height: calc(100vw * 0.8);
で自己解決できました。

最初は
height: calc(80 / 100vw);で対応しようとしたのですが
割り算の右側は数量でないといけないという記事を見つけ、
実際動作しなかったので掛け算に変更しました。

お騒がせしました。