子要素の片方を親要素からはみ出させる方法

親要素(max-width:1000px)から子要素を右側のみ画面いっぱいに合わせたいです。

調べても両端を親要素からはみ出させる方法しかヒットできなかったので、
お手数おかけいたしますが教えていただけましたら幸いです。

行動規範の内容に同意します

回答1件

ベストアンサー

こういうことでしょうか？
幅以外のところは、はしょっています。

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8"/>
5  <style>
6  body{
7    margin:0;
8    background-color:whitesmoke;
9    height:500px;
10  }
11  #oya{
12    max-width:1000px;
13    height:500px;
14    background-color:blue;
15    margin-left:50px;/*左側のマージン*/
16  }
17  #ko{
18    width:calc(100vw - 50px);/*ビューの100% - 50px（左側のマージン）*/
19    background-color:lightskyblue;
20    height:200px;
21  }
22</style>
23</head>
24<body>
25  <div id="oya">
26    <div id="ko"></div>
27  </div>
28</body>
29</html>

投稿2018/11/05 00:50

編集2018/11/05 00:51

colling

総合スコア798

mk0615

2018/11/05 01:25

ご丁寧にありがとうございます。 vwを使って計算するんですね。参考になりました。無事やりたいことが実現できそうです。ありがとうございました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.30%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する