ベストアンサー overflow: hidden; 2014/03/13 15:04 h2要素にoverflow: hidden;を指定すると、 左の要素と高さがずれてしまうのですが、解決策はありますでしょうか? GoogleChrome みんなの回答 (1) 専門家の回答 質問者が選んだベストアンサー ベストアンサー ORUKA1951 ベストアンサー率45% (5062/11036) 2014/03/13 17:45 回答No.1 現象がわからないです。 ・・・ 通報する ありがとう 0 カテゴリ [技術者向] コンピュータープログラミング・開発CSS 関連するQ&A overflow:hidden について dreamweaverでサイトを作っている初心者です。 ある部分の表示がどうしてもうまくいかない(divで囲んだエリアのたての長さが, cssの指定通りに表示されない)ので、友人に相談したところ、overflow:hiddenを加えると直るかもしれない と言われ、つけてみると直る場合があります。 このプロパティについて調べてもそういう説明は見当たりませんが、これは裏技みたいなものなんでしょうか? 皆さんコレを使っていますか? swfをoverflow: hiddenできない HTMLカテゴリに登録しましたが、CSSの質問です。 divタグの大きさをCSSでwidthとheightで指定し、overflow: hiddenの設定をしました。 ここでdivタグ内に文書を書き、それがCSSで指定したdivタグのサイズ(範囲)を超えてしまった場合、はみ出た部分はoverflow: hiddenにより見えなくなります。 画像でも同様だったのですが、何故かFlash(swfデータ)はIE以外のブラウザ(NN、Firefox、Operaなど)で見たところ、overflowが効いていません。隠したい部分も見えてしまいます。なぜなのでしょうか? ソースは以下になります。 <?xml version="1.0" encoding="utf-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/xhtml1/xhtml1-transitional/"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> <!-- #clip { border: 1px solid blue; width: 500px; height: 100px; overflow: hidden; } //--> </style> <title></title> </head> <body> <div id="clip"> <embed src="flash.swf" width="500" height="250" /> </div> </body> </html> お分かりのように、本来はheight=250pxのswfをheight=100px分だけ表示したいのです。 overflow:hiddenでスクロールバー <div id="header"> <div id="main"> <div id="footer"> の構成でそれぞれにoverflow:hiddenをCSSにて記述しています。 最近 main 部分がはみ出すとブラウザにスクロールバーが 出ることに気付きました。 色々調べた結果、bodyに直接overflow:hiddenを 書けば良いことが分かりました。 ええっとそういうものなのでしょうか。ちょっと変に感じてますが。 overflow-x : hiddenが効かない; mac、html5でwebサイトを作ってます。 せっかく、以前ここで3カラム左右可変をやり方を教えていただいたのですが、うまく出来なかったので3カラムとも固定で@media screen and で一定のwidthになったらサイズを変更する方法をとる事にしました。 それで、widthが狭まった時スクロールを表示しないようにしたいんですが、 overflow-x : hidden; (position:relative;)が効きません。どのブラウザでも同じで理由が解りません。 widthを狭めてもカラム落ちや片方に寄らせずに.. html5で書いてるのですがhtml5.jsが重いそうなのでhtm4でも使えるタグで使ってます。 l----------------------------------------------------l l------------------id=header-------------------l l_____________________________________l --口-----------l最初は左I右固定l----------------l l-----------------lの3IカラムI。l----------------l l----------------------------------------------------l l----------------------------------------------------l body{ width:1500px; position:relative; overflow-x : hidden; } . header{ ~~~ ~~~ } #3カラム{ margin-left: auto; margin-right: auto; width:500px; position: relative;かposition: absolute; ~~ } .clearfix:after{ content: ""; clear: both; display: block; } #左画像{ position: absolute; width:100px; margin-left:10px; z-index:2; } htmlで左画像はカラムの外に置きました。 widthがある一定の数まで縮まった段階で@media screen and を使って中央も可変にするつもりです。 可能でしょうか? 「overflow: hidden」ペー ジ内リンクで画面がずれてしまう <body>に「overflow: hidden」を指定してスクロールバーを非表示にし、 領域<div class="scroll">内のみスクロールさせる「擬似フレーム」的(?)なものをつくりました。 そして、<div class="scroll">の中をクリックで移動するためのアンカーリンクを設けました。 ブラウザのウィンドウサイズが十分に大きい場合は問題ないのですが、 ウィンドウサイズが小さい(本来なら縦スクロールが必要になるサイズ)場合、 リンククリックで画面内が上にピッとずれてしまいます。 <body>に「position: fixed」を指定すればFirefox等では解決しますが、IEではダメです。 このズレを防ぐ方法はないものでしょうか。 以下サンプルソースです。 <html> <head> <style type="text/css"> <!-- body { overflow: hidden; /*---↓Firefox等でOK、IEはダメ------- position: fixed; top: 0px; -----------------------------------*/ } .scroll { overflow: auto; height: 200px; background: #CCCCCC; padding: 10px; } --> </style> </head> <body> <h1>ページ内リンクによる「scroll」と「overflow: hidden」 </h1> <ul> <li><a href="#topic1">その1>> </a></li> <li><a href="#topic2">その2>> </a></li> <li><a href="#topic3">その3>> </a></li> </ul> <div class="scroll"> <div id="topic1"> <h2>その1</h2> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> </div> <div id="topic2"> <h2>その2</h2> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> </div> <div id="topic3"> <h2>その3</h2> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> </div> </div> </body> </html> overflow:scrollの要素内リンクの質問 overflow:scrollを指定した要素内での要素内リンク(アンカーリンク?)の方法を探しています。 参考: http://solidstate.jp/ContentsDisplay/tabBox/script_144.html イメージとしては、、overlow:scrollを指定した要素の外に、overflow:scrollを指定した要素をコントロールするリンクがあって、そのリンクをクリックすると、overflow:scrollを指定した要素内の指定位置まで移動するようなイメージです。 参考にあげさせていただいたサイトのものでも良いのですが、他にこういったことを実現するJavascriptやJQueryをご存知の方がいらっしゃいましたら教えてください。 よろしくお願いします。 CSS:overflow要素の印刷について いつもお世話になってます。 CSSで、縦のoverflow要素を、"scroll"に設定しました。 そこで、画面に表示されているものだけではなく、要素全てを印刷したいのですが(>_<)方法は何かあるのでしょうか?? どなたか教えてください! よろしくお願いします。 overflowを使ってのスクロール CSSのoverflowを使って、ページの一部をスクロールさせたいのですが 完全に下までスクロールができません。 具体的には以下のソースの"div2"をスクロールさせたく、overflowのauto を使っているのですが、一番下までスクロールができません。 どのようにしたらよいか、ご指摘お願いいたします。 HTMLのソースは以下の通りです。 このままコピペしてもらえば動作を確認してもらえると思います。 どうかよろしくお願いいたします。 <html> <head> <style type="text/css"> body { overflow: hidden; } div { border: 1px solid black; } #div2 { height: 100%; overflow: auto; } </style> </head> <body> <div id="div1"></div><br> <div id="div2"></div> </body> <script type="text/javascript"> var text = ""; for (var i=0; i<10; i++) text += "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>"; document.getElementById('div1').innerHTML = text; for (var i=0; i<150; i++) text += "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>"; document.getElementById('div2').innerHTML = 'BEGIN<br>' + text + 'END'; </script> </html> 自動改行と入りきらない文字列の省略 overflow: hiddenとword-break: break-allを使い、 ・入りきるまでを改行 ・最後入らない文字列を省略、最後を「...」に、 (例)こんな感じです↓↓ | ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄| |aaaaaaaaaaaaaaaaaa | ←改行 |aaaaaaaaaaaaaaaaa... | ←省略、「...」 |_________| ということをしたいんですが、overflow: hiddenを使うと、 word-break: break-allが機能しません。 両方を1度に使うことは出来ないんでしょうか? また、解決策はありますか? overflow:scrollのスクロールバーのデザイン overflow:scrollのスクロールバーのデザイン 自分のHPで、あるリストを overflow:scroll にして、縦横指定して使っているんですが、その時のスクロールバーのデザインって変えられないのでしょうか。cssで、bodyに打ち込んでもダメ、そのリストのclassで指定してもダメでした。 どなたか分かる人があれば教えてください。 table要素のwidthの解釈 tableタグを使って次のようなことをしたいと考えています。 ・table要素の親はdiv要素 ・div要素にはサイズ(width/height)が指定されており、overflow:hiddenとしてある。 ・table要素にはサイズを指定しない ・td要素にはサイズを指定する →つまり、tableのサイズはtdのサイズで決定する HTML/CSSは次の通りです。 ----------------------------------------------------- div { width: 300px; overflow: hidden; } table { table-layout: fixed; } td { width: 170px; } <div> <table><tr> <td>a</td><td>b</td><td>c</td> </tr></table> </div> ----------------------------------------------------- このコードを「DOCTYPE宣言を書かずに」IE8で開くと、想定通りの表示になりますが、 <!DOCTYPE html>と記述すると、tableの横幅が300pxに詰められてしまいます。 td要素のwidth指定が働かず、親のdiv要素のwidthに無理やり押し込められてしまうようです。 また、FirefoxではDOCTYPE宣言無しでも同様の問題が起きてしまいます。 table内の列数は固定ではないので、tableに対してwidth指定はしたくありません。 何か書き方が間違っているのでしょうか。 あるいは、標準準拠モードの仕様では、そもそもできないことをやろうとしているのでしょうか。 <div style="overflow">でこんなことは出来ませんか? <div style="overflow: auto; height: **px;width:**px;"> というタグについて教えてください。 <div>で囲まれた内容が、height: **pxに満たない場合、 スクロールバーは出ませんが スペースはheight: **px分、空いてしまいます。 やりたいことは、<div>で囲む内容が height: **px未満の場合はスペースもあけず スクロールバーも出さず、overflow未指定の状態にする。 height: **pxの場合はheight: **pxで高さを固定して スクロールバーを出す。ということです。 何か良い方法はありませんでしょうか。 よろしくお願いします。 Servlet-JSP間のhidden要素での値受け渡し Servletをはじめて間もない初心者です. 説明がわかりづらいかも知れませんがご容赦ください. Servlet-JSP間の値の受け渡しについての質問です. Servlet1-----page1.jsp | |__beans1.java | Servlet2-----page2.jsp |__beans2.java という2つのページがあるとします. page1.jspからpage2.jspを開く時に page1.jsp → Servlet2 → page2.jsp(編集モード) → page2.jsp(登録モード) の何れかのモードでpage2.jspを開きたいと考えています. page1.jspの中に <input type="hidden" name="PageState"> というhidden要素を定義してServlet2にフラグを渡せば解決できると思うのですが,hidden要素はセキュリティ上使用しない方が良い?という記述を読んだことがあるので,この方法でよいのか悩んでおります. 何かご意見や別の方法がありましたらアドバイスお願いいたします. width指定したTDでwhite-space:nowrapが効かない width指定したTDでwhite-space:nowrapが効かない ブラウザはIE6~8のみを想定しています。 下記のHTMLでは、2行目は正常なのですが、1行目のnowrapが働かず、改行がかかってしまいます。 列毎に幅を指定する必要があるので、1行目にはwidthを指定しているのですが、 どのようにすれば自動改行を禁止できるでしょうか。 <table style="table-layout: fixed;"> <tr> <td style="width: 50px; overflow: hidden; white-space: nowrap;">あああああああ</td> <td style="width: 70px; overflow: hidden; white-space: nowrap;">あああああああ</td> </tr> <tr> <td style="overflow: hidden; white-space: nowrap;">あああああああ</td> <td style="overflow: hidden; white-space: nowrap;">あああああああ</td> </tr> </table> フレームを使わずに、overflowの代わりとなるタグ。 さっそく質問させて頂きます。 スタイルシートの「overflow」を使うと、MacのIEやOPERAでは表示が崩れたり、非表示になってしまいます。「overflow」の代わりになるようなタグはないでしょうか? ちなみに、似たようなもので http://oshiete1.goo.ne.jp/kotaeru.php3?q=1216651 があります。これを使って解決しようと思えば出来るのですが… http://www.thekeiichi.com/ コチラのサイトの左上にあるフレームのようなことがしたいのです。ソースを見ましたが、イマイチ私にはわかりませんでした。 ご存じの方がいらっしゃたら、お手数ですが御指南願います。 iframeの横スクロール iframeを使ってほかのページを表示させているのですが、 どうしても横スクロールバーが出てしまうのでcssのbody要素に 「overflow-x: hidden;」と入れました。 確かにiframeの横スクロールバーは消えましたが、ページの横スクロールも消えてしまいました。 div idでiframeを囲ってcssでその場所だけに「overflow-x: hidden;」を入れると今度は横スクロールバーが消えません。。 色々調べてみたのですが同じような人がいないようで; 詳しい方教えていただけないでしょうか。 (説明がへたくそですみませんm(_ _)m) GoogleChromeでレイアウトが左寄せになる GoogleChromeでレイアウトが左に寄ってしまう。。。 タイトルの通り、Google Chromeで私のウェブサイトを閲覧した際に、レイアウトが左に寄ってしまっていることが分かったのですが、どう修正したら良いのか分からず大変悩んでいます。 当サイトのURLは下記になります。 http://runp.web.fc2.com/ GoogleChromeで当サイトを見るとレイアウト全体が左に寄ってしまっています。 FireFoxやIE、何故Chromeだけ左によってしまうのでしょうか・・・。 ネットで調べて色々試しましたが、わかりませんでした。 私で方法が思いつきませんので、どなたか詳しい方がいましたら原因と解決策を教えて頂きたいです。 アドバイスお待ちしていますので、よろしくお願いします! hiddenには文字制限があるのでしょうか? あるフォームに備考欄をつけました。 その内容を確認画面に表示。 その後確認画面がOKをおされた場合備考の内容を <form action="./index.php" method="post"> <input type="hidden" name="biko" value=<? echo $biko; ?>> でメール送信するモジュールへとばしています。 このとき、届いたメールに備考の内容が26文字しかありませんでした。 これはhiddenの文字の上限なのでしょうか? 解決方法もわかる方がいらっしゃったら教えてください。 HTML超初心者です。CSSでOverflowをautoにして ifr HTML超初心者です。CSSでOverflowをautoにして iframeのようにスクロール出来るようにしているのですが、スクロールバーのある右端ギリギリまで文字がいってるので、スクロールバーの左に文字との余白を作りたいです。出来なくて困っています。 余白をつくることは可能でしょうか、アドバイスをお願い致します。 stack overflow at line 0 と出てしまう こんにちは。 価格.comを見ていたところ、更新キーを変なタイミングで押して 以来stack overflow at line 0と出て、本来顔のアイコンである 所や商品の写真である所などが×になってしまい表示されなくな ってしまいました。 立ち上げなおせば大丈夫かなぁと思い、再起動をかけてみたので すが、ダメでした。治りません。 英語のメッセージのあとで日本語で 「このページのスクリプトが、internet Explorerの実行速度を 遅くしています。スクリプトを実行し続けるとコンピュータが 反応しなくなる可能性があります。スクリプトを中断しますか?」 と出てきて「はい」か「いいえ」を選ぶようになっています。 ハイを押しても立ち上げなおしたらまた同じようにメッセージが 出てきます。 色々こおメッセージを検索してみたのですが、解決策を見つける ことが出来ませんでした。 今の所価格.comのページに限られていて、同じような×になっても 良さそうなボタンがついているこのぺージはまったくいつもと変わ らず同じです。 IE06です。 どなたか教えて下さい。 よろしくお願いします。 注目のQ&A 「前置詞」が入った曲といえば? 緊急性のない救急車の利用は罪になるの? 助手席で寝ると怒る運転手 世界がEV車に全部切り替えてしまうなら ハズキルーペのCMって…。 全て黒の5色ペンが、欲しいです 長距離だったりしても 老人ホームが自分の住所になるのか? 彼氏と付き合って2日目で別れを告げられショックです 店長のチクチク言葉の対処法 カテゴリ [技術者向] コンピューター プログラミング・開発 Microsoft ASPC・C++・C#CGIJavaJavaScriptPerlPHPVisual BasicHTMLXMLCSSFlashAJAXRubySwiftPythonパフォーマンス・チューニングオープンソース開発SEOスマートフォンアプリ開発その他(プログラミング・開発) カテゴリ一覧を見る あなたにピッタリな商品が見つかる! OKWAVE セレクト コスメ化粧品 化粧水・クレンジングなど 健康食品・サプリ コンブチャなど バス用品 入浴剤・アミノ酸シャンプーなど スマホアプリ マッチングアプリなど ヘアケア 白髪染めヘアカラーなど