質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

1403閲覧

下部のセクションの右端がウィンドウを小さくするとwidth が狭くなっている。

TomofumiKimura

総合スコア65

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/05/16 05:43

簡単に自分がしたいことを言うと、下部のfooter セクションがページの端から端まで伸びているようにしたいのですが、自分のはできていません。ウィンドウがマックスの大きさになっていると少し大丈夫なのですが、ウィンドウを小さくするとなぜか右端が切れてしまいます。どうしてなのでしょうか?

html

1<!-- Assignment 18 % COMP112 Tomofumi Kimura index page--> 2<!DOCTYPE html> 3<html lang="en"> 4 <head> 5 <!-- kimto341 child care--> 6 <meta charset = "UTF-8"> 7 <link rel="stylesheet" type = "text/css" href="style.css"> 8 <title>Child Care HomePage</title> 9 </head> 10 <body> 11 <!-- Main Heading--> 12 <div id = "header"> 13 <h1>Welcome to Mama Bear Child Care</h1> 14 </div> 15 <!-- Navigation Area --> 16 <div id = "nav"> 17 <ul> 18 <li><a class="active" href="index.html">Home</a></li> 19 <li><a href = "philosophy.html">Our Philosophy</a></li> 20 <li class = "dropdown"><a href="javascript:void(0)" class = "dropbtn">Our Centre</a> 21 <div class = "dropdown-content"> 22 <a href="accelerated_programme.html">Mama Bear Accelerated Programme</a> 23 <a href="environment.html">Our Environment</a> 24 <a href="goals.html">Our Goals</a> 25 </div> 26 </li> 27 28 29 <li><a href="childs_day.html">The Childs Day</a></li> 30 <li><a href="settling.html">Settling in</a></li> 31 <li><a href = "staff.html">Our Staff</a></li> 32 33 </ul> 34 </div> 35 36 <!-- Contact Area --> 37 <div id = "contacts"> 38 <h3 id="contact_us">Contact Us</h3> 39 <h4>If you have any questions about the Mama Bear please contact us at:</h4> 40 <ul> 41 <li><address><a href="mailto:enquiries@mamaBear.co.nz">enquiries@mamaBear.co.nz</a></address></li> 42 <li>123 Salmon Lake Lane</li> 43 <li>Big Bear City</li> 44 </ul> 45 </div> 46 <!-- Main Area --> 47 <div class="content"> 48 <h2>Our Philosophy</h2> 49 50 <ul id = "philo_list"> 51 <li id = "list1">We believe in positive respectful partnerships between <br>children, families, caregivers and teachers where we value our community's diversity.</li> 52 <li id = "list2">We aim to support children's learning through a stimulating prepared environment that<br> nurtures and develops dispositions for learning and provides opportunities for success,<br> challenges, individual interests, and freedom of choice.</li> 53 54 <li id = "list3">Our community fosters contextual, collaborative and reciprocal learning, where teachers are facilitators, carers and friends of the children.</li> 55 <li id="list4">We empower children to be independent, competent, confident,<br> compassionate and responsible human beings, and most importantly to have fun in the process.</li> 56 57 <li id = "download">You can download <a href = "../prospectus.pdf" download="prospectus_file"><strong><span>the Mama Bear Child Care Prospectus(pdf)</span></strong></a>,<br> which contains much of the information from this web site in print form. </li> 58 59 60 61 </ul> 62 <figure id = "baby"> 63 <img src = "../Images/babypaint.jpg"> 64 </figure> 65 </div> 66 <!-- Footer area --> 67 <div id = "footer"> 68 <footer>This website was created for a University project. The content is largely fictional and no services are actually being offered.</footer> 69 70 </div> 71 72 </body> 73</html>

css

1/* COMP112 Assignment 18% tkimura Tomofumi Kimura stylesheet*/ 2body{ 3 background-color:rgb(224, 200, 202); 4 width:1024px; 5 margin:0px; 6} 7 8/* main heading*/ 9#header h1{ 10 background-color:red; 11 text-align: center; 12 width:100%; 13 margin:0px; 14 padding:20px; 15 position:fixed; 16 top:0; 17 left:0; 18 right:0; 19} 20/* Navigation whole area */ 21#nav{ 22 background-color:rgb(87, 209, 204); 23 position:fixed; 24 top:75px; 25 left:0; 26 right:0; 27 width:100%; 28 margin:0px; 29} 30/* Navigation whole ul ara */ 31#nav ul{ 32 max-width:100%; 33 list-style-type:none; 34 padding:0; 35 margin-top:0px; 36 margin-left:150px; 37 margin-right:auto; 38 margin-bottom:auto; 39 overflow:hidden; 40 background-color:inherit; 41} 42/* Navigation list area*/ 43#nav li{ 44 float:left; 45 46 47} 48 49/* Navigation list link, DropDown menu*/ 50#nav li a, .dropbtn{ 51 display:block; 52 color:inherit; 53 text-align:center; 54 padding:14px 30px 10px 30px; 55 text-decoration: none; 56 57 58} 59/* when user move the pointer to the place */ 60#nav li a:hover, .dropdown:hover .dropbtn{ 61 background-color:yellow; 62} 63 64#nav li.dropdown{ 65 display:block; 66} 67/* drop down area*/ 68.dropdown-content{ 69 display:none; 70 position:absolute; 71 background-color:#f9f9f9; 72 min-width:100px; 73 box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2); 74 z-index: 1; 75} 76/* drop down list element*/ 77.dropdown-content a{ 78 color:black; 79 padding:12px 16px; 80 text-decoration: none; 81 display:block; 82 text-align:left; 83} 84/* when mouse is over the drop down list element */ 85.dropdown-content a:hover{ 86 background-color:#f1f1f1; 87} 88 89.dropdown:hover .dropdown-content{ 90 display:inline; 91} 92 93/* Contact Us Area*/ 94 95#contacts{ 96 position:fixed; 97 right:10px; 98 float:right; 99 width:220px; 100 margin-left:20px; 101 border-radius:25px; 102 border:2px solid #73AD21; 103 background-color:yellow; 104 padding:10px; 105} 106#contact_us{ 107 color:red; 108} 109 110/* Main Area*/ 111.content{ 112 margin-top:170px; 113 margin-right:20px; 114 width:1100px; 115 height:auto; 116 117} 118 119 120/* h2 Mama Bear CHild Care heading */ 121.content h2{ 122 text-align: center; 123 color:rgb(0, 102,255); 124} 125.content h3{ 126 text-align: center; 127 128} 129.content h4{ 130 text-align:center; 131 132} 133.content span{ 134 color:red; 135} 136#attention{ 137 text-align:center; 138 background-color:rgb(153,204,255); 139 border:dotted 2px ; 140 padding-left:-10px; 141 border-radius: 40px; 142} 143 144/* Education Services UList*/ 145.content ul{ 146 margin:auto; 147 border-radius: 50px; 148 border:2px solid #73AD21; 149 padding:40px; 150 padding-top:10px; 151 width:400px; 152 height:140px; 153 background-color:rgb(153,204,255); 154 list-style-image: url('../Images/list_image/icn_12.gif'); 155} 156.content li{ 157 padding:20px; 158} 159/* Philosophy page List */ 160#philo_list{ 161 border-radius:50%; 162 background-color:white; 163 width:800px; 164 height:500px; 165} 166#philo_list li{ 167 margin-left:30px; 168 font-size:15px; 169} 170/* First list in philosophy List */ 171#philo_list #list1{ 172 margin-left:130px; 173 margin-top:50px; 174} 175/* Second list in philosophy List*/ 176#philo_list #list2{ 177 margin-left:160px; 178} 179/* Third List in philosophy List*/ 180#philo_list #list3{ 181 margin-left:180px; 182} 183 184/* Fourth List in philosophy List*/ 185#philo_list #list4{ 186 margin-left:200px; 187} 188 189/* Fifth List in philosophy List*/ 190#philo_list #download{ 191 margin-left:200px; 192 color:blue; 193} 194#philo_list #download span{ 195 color:red; 196 text-decoration: underline; 197 198} 199 200#baby{ 201 position:absolute; 202 top:400px; 203 left:110px; 204 205} 206 207/* Footer area*/ 208 209#footer{ 210 margin-top:30px; 211 margin-right:0px; 212 position:relative; 213 background-color:rgb(87, 209, 204); 214 color:inherit; 215 padding:30px; 216 width:100%; 217 height:10px; 218}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

.contentにもwidthが設定されていますね。

投稿2017/05/16 06:14

rjunakc

総合スコア368

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

TomofumiKimura

2017/05/16 06:16

content とfooter は関係あるんですか??
rjunakc

2017/05/16 06:18

contentに1100pxの幅があると、幅の最大値が1100pxになります。 footerは100%を指定しているので、伸びる限界がウィンドウ幅が大きければ端まで伸びますが、ウィンドウ幅が1100pxよりも狭い場合は、最大値1100pxまで伸びます。
TomofumiKimura

2017/05/16 06:23

ではどうしたらいいのでしょうか?
rjunakc

2017/05/16 06:27

とりあえず、bodyと.contentのwidthを削除してみてください。それで、footerの幅はウィンドウ幅に合うと思います。
guest

0

bodyにwidthを設定していて、ウインドウ幅がbodyのwidthより短くなっているからではないですか。

投稿2017/05/16 06:03

rjunakc

総合スコア368

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

TomofumiKimura

2017/05/16 06:10

今試してみましたが、違いました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問