こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

サイドバーを自動にすると下のデザインが反映されない

初めて質問いたします。
もしよろしければ、お返事いただけると幸いです。


「サイドバーを、メイン部分と同じ長さにしてほしい」とのことだったので、以下のCSSを書きました。


/* main + sideをくくる */
.wrapper
{
overflow: hidden ;/* floatを解除する */
}

/* サイドバー */
.side
{
padding-bottom: 10000px;
margin-bottom: -10000px;
}


ところが、このサイドバーの四隅を丸めてほしいとのことだったので、以下のCSSを追加しました。


/* サイドバー */
.side
{
border-radius: 7px/20px; /* 角を丸める */

padding-bottom: 10000px;
margin-bottom: -10000px;
}


このようにしたのですが、下はどうしても丸められません。

ボディも同様に角を丸めるようにとのことだったので、そちらも同じように書いたら、四隅をきちんと丸められました。


.main_contents
{
border-radius: 7px/20px;
}



おそらく、サイドバーの10000pxあたりで丸まっているのだろうが、表示されないので、途中で切れたような形なのだと想像はできました。
しかしこの場合の解決ができません。

どなたか、よい方法をご存じないでしょうか。
よろしければ、教えてください。

よろしくお願いいたします。

投稿日時 - 2018-04-02 21:38:50

QNo.9484426

困ってます

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

ANo.1

なかなかやり方が乱暴ですねぇ

角丸してくれってことはもうCSS3でやっていいってことだろうし
高さを揃えるのはflexでやるといいかもですよ

投稿日時 - 2018-04-11 16:33:23

お礼

ご丁寧に、お返事ありがとうございます。
flexを使ってみることにします。
ありがとうございました。

投稿日時 - 2018-04-11 17:27:08

あなたにオススメの質問