ブラウザウィンドウの高さを100%にするdivを作成する方法

2238
mike 2009-10-16 11:18.

divと右の2列のレイアウトがありますdiv

右側divは灰色background-colorで、ユーザーのブラウザウィンドウの高さに応じて垂直方向に拡大する必要があります。現在、background-colorその中の最後のコンテンツで終わりdivます。

私が試したheight:100%min-height:100%;など、

30 answers

2930
James Donnelly 2013-05-31 03:33.

次のようなCSS3測定単位がいくつかあります。

ビューポート-パーセンテージ(またはビューポート-相対)の長さ

ビューポート-パーセンテージの長さとは何ですか?

上記のリンクされたW3候補の推奨事項から:

ビューポートのパーセンテージの長さは、最初に含まれているブロックのサイズを基準にしています。最初の包含ブロックの高さまたは幅が変更されると、それに応じてスケーリングされます。

これらの単位は、vh(ビューポートの高さ)、vw(ビューポートの幅)、vmin(ビューポートの最小の長さ)、およびvmax(ビューポートの最大の長さ)です。

これを使用して、ブラウザの高さを仕切りで埋めるにはどうすればよいですか?

この質問では、ビューポートの高さの1%に等しいvh:を使用でき1vhます。つまり100vh、要素がDOMツリーのどこに配置されているかに関係なく、ブラウザウィンドウの高さに等しくなります。

HTML

<div></div>

CSS

div {
    height: 100vh;
}

これは文字通り必要なすべてです。ここでJSFiddle例の使用でこれを。

これらの新しいユニットをサポートするブラウザは何ですか?

これは現在、OperaMiniを除くすべての最新の主要ブラウザでサポートされています。さらなるサポートについては、「使用できますか...」を確認してください。

これを複数の列でどのように使用できますか?

左と右の仕切りを特徴とする当面の質問の場合、これはvhとの両方を含む2列のレイアウトを示すJSFiddleの例vwです。

とどう100vh違うの100%

このレイアウトを例にとってみましょう。

<body style="height:100%">
    <div style="height:200px">
        <p style="height:100%; display:block;">Hello, world!</p>
    </div>
</body>

pここでのタグは高さ100%に設定されていますが、含まれdivている高さは200ピクセルであるため、200ピクセルの100%は高さの100%ではなく200ピクセルになりbodyます。100vh代わりに使用すると、p高さにbody関係なく、タグは100%の高さになりdivます。この付随するJSFiddleを見て、違いを簡単に確認してください。

577
Ariona Rian 2011-12-12 03:10.

a<div>または任意の要素の高さを設定する場合は、<body>およびの高さ<html>も100%に設定する必要があります。次に、要素の高さを100%に設定できます:)

次に例を示します。

body, html {
  height: 100%;
}

#right {
  height: 100%;
}
287
Tinister 2009-10-16 11:31.

要素を絶対的に配置できる場合は、

position: absolute;
top: 0;
bottom: 0;

それをします。

144
MrGeek 2016-05-05 01:11.

CSSでビューポートユニットを使用できます。

HTML:

<div id="my-div">Hello World!</div>

CSS:

#my-div {
    height: 100vh; /* vh stands for view-port height, 1vh is 1% of screen height */
}
137
Alireza 2017-06-04 07:43.

vhこの場合、ビューポートの高さの1%を基準にして使用できます。

つまり、高さを隠したい場合は、単にを使用します100vh

私がここにあなたのために描く下の画像を見てください:

以下のように私が作成したスニペットを試してください。

.left {
  height: 100vh;
  width: 50%;
  background-color: grey;
  float: left;
}

.right {
  height: 100vh;
  width: 50%;
  background-color: red;
  float: right;
}
<div class="left"></div>
<div class="right"></div>

107
Airen 2013-06-13 04:14.

フレックスモデルソリューションvhと比較した場合、上位投票のソリューションを含む他のすべてのソリューションは最適ではありません。

CSSフレックスモデルの登場により、100%の高さの問題を非常に簡単に解決できるようheight: 100%; display: flexになりflex: 1ました。つまり、親要素と子要素で使用できます。コンテナ内の利用可能なすべてのスペースを自動的に占有します。

マークアップとCSSがいかに単純であるかに注意してください。テーブルハックなどはありません。

フレックスモデルは、IE11 +だけでなくすべての主要なブラウザでサポートされています。

html, body {
  height: 100%;
}
body {
  display: flex;
}

.left, .right {
  flex: 1;
}

.left {
  background: orange;
}

.right {
  background: cyan;
}
<div class="left">left</div>
<div class="right">right</div>

フレックスモデルの詳細については、こちらをご覧ください。

54
cletus 2009-10-16 13:13.

次のようないくつかの重要な詳細については言及していません。

  • レイアウトは固定幅ですか?
  • 列のいずれかまたは両方が固定幅ですか?

1つの可能性があります:

body,
div {
  margin: 0;
  border: 0 none;
  padding: 0;
}

html,
body,
#wrapper,
#left,
#right {
  height: 100%;
  min-height: 100%;
}

#wrapper {
  margin: 0 auto;
  overflow: hidden;
  width: 960px; // width optional
}

#left {
  background: yellow;
  float: left;
  width: 360px; // width optional but recommended 
}

#right {
  background: grey;
  margin-left: 360px; // must agree with previous width 
}
<html>
<head>
  <title>Example</title>
</head>

<body>
  <div id="wrapper">
    <div id="left">
      Left
    </div>

    <div id="right"></div>
  </div>
</body>

</html>

どのカラムを固定する必要があり、どのカラムを液体にするかによって、これには多くのバリエーションがあります。絶対配置でもこれを行うことができますが、代わりにフロートを使用すると、一般的に(特にクロスブラウザーに関して)より良い結果が得られます。

35
Majda 2013-07-28 06:18.

これは私のために働いたものです:

<div style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; background: red;"> </div>

position:fixed代わりに使用するとposition:absolute、下にスクロールしても分割が画面の最後まで展開されます。

29
Jonas Sandstedt 2013-08-22 06:57.

これが高さの修正です。

CSSでの使用:

#your-object: height: 100vh;

をサポートしていないブラウザのvh-units場合は、modernizrを使用してください。

このスクリプトを追加します(の検出を追加するためvh-units

// https://github.com/Modernizr/Modernizr/issues/572
// Similar to http://jsfiddle.net/FWeinb/etnYC/
Modernizr.addTest('cssvhunit', function() {
    var bool;
    Modernizr.testStyles("#modernizr { height: 50vh; }", function(elem, rule) {   
        var height = parseInt(window.innerHeight/2,10),
            compStyle = parseInt((window.getComputedStyle ?
                      getComputedStyle(elem, null) :
                      elem.currentStyle)["height"],10);

        bool= !!(compStyle == height);
    });
    return bool;
});

最後に#your-object、ブラウザがサポートしていない場合は、この関数を使用してビューポートの高さを追加しますvh-units

$(function() { if (!Modernizr.cssvhunit) { var windowH = $(window).height();
        $('#your-object').css({'height':($(window).height())+'px'});
    }
});
24
Dinesh Pandiyan 2018-11-19 07:36.

100% 幅と高さの動作が異なります。

を指定するとwidth: 100%、「親要素またはウィンドウの幅から使用可能な幅の100%を占める」ことを意味します。

を指定するとheight: 100%、「親要素から使用可能な高さの100%を占める」という意味になります。つまり、最上位の要素で高さを指定しない場合、すべての子の0高さは親の高さまたは親の高さになります。そのため、最上位の要素をmin-heightウィンドウの高さに設定する必要があります。

私は常にボディを100vhの最小高さに指定します。これにより、ポジショニングと計算が簡単になります。

body {
  min-height: 100vh;
}
19
machineghost 2020-03-13 10:10.

ここにすべての答えがあっても、実際に問題を解決したものがないことに驚きました。100vh height/を使用したmin-height場合、コンテンツが1ページより長いとレイアウトが壊れました。代わりに100% height/を使用したmin-height場合、コンテンツがページの高さよりも小さいとレイアウトが壊れました。

私が見つけた解決策は、両方のケースを解決し、上位2つの答えを組み合わせることでした。

html, body, #mydiv {
  height: 100%;
  min-height: 100vh;
}
18
lukaszkups 2013-01-29 01:05.

これを試してください-テスト済み:

body {
  min-height: 100%;
}

#right, #left {
  height: 100%;
}

編集:2020年の更新:

vh今すぐ使用できます:

#right, #left {
  height: 100vh
}
17
Руслан 2017-09-28 04:06.

100vw =ビューポートの幅の100%。

100vh =ビューポートの高さの100%。

div幅または高さをbrowser-window-sizeの100%に設定する場合は、次を使用する必要があります。

幅の場合: 100vw

高さの場合: 100vh

または、サイズを小さく設定する場合は、CSScalc関数を使用します。例:

#example {
    width: calc(100vw - 32px)
}
16
Remus Simion 2011-12-11 11:34.

min-height: 100%高さを追加して指定しないでください(または自動に設定します)。それは完全に私のために仕事をしました:

.container{     
    margin: auto;
    background-color: #909090;
    width: 60%;
    padding: none;
    min-height: 100%;
}
14
EMILO 2020-01-09 08:44.

最も簡単な方法は、このようにすることです。

div {
background: red;
height: 100vh;
}
body {
margin: 0px;
}
<div></div>

12
Santosh Khalse 2017-01-05 00:43.

aの高さ<div>を100%に設定するには、いくつかの方法があります。

方法(A):

html,
body {
  height: 100%;
  min-height: 100%;
}
.div-left {
  height: 100%;
  width: 50%;
  background: green;
}
.div-right {
  height: 100%;
  width: 50%;
  background: gray;
}
<div class="div-left"></div>
<div class="div-right"></div>

vhを使用する方法(B):

html,
body {
  height: 100%;
  min-height: 100%;
}
.div-left {
  height: 100vh;
  width: 50%;
  background: green;
  float: left;
}
.div-right {
  height: 100vh;
  width: 50%;
  background: gray;
  float: right;
}
<div class="div-left"></div>
<div class="div-right"></div>

フレックスボックスを使用する方法(c):

html,
body {
  height: 100%;
  min-height: 100%;
}
.wrapper {
  height: 100%;
  min-height: 100%;
  display: flex;
}
.div-left {
  width: 50%;
  background: green;
}
.div-right {
  width: 50%;
  background: gray;
}
<div class="wrapper">
  <div class="div-left"></div>
  <div class="div-right"></div>
</div>

12
testing 2013-06-13 04:01.

これは私のために働いた:

html, body {
    height: 100%; /* IMPORTANT!!! Stretches viewport to 100% */
}

#wrapper {
    min-height: 100%; /* Minimum height for a modern browser */
    height:auto !important; /* Important rule for a modern browser */
    height:100%; /* Minimum height for Internet Explorer */
    overflow: hidden !important; /* Firefox scroll-bar */
}

このページから取得。

11
Mohammed Javed 2016-04-15 00:19.

に設定height:100%してみてくださいhtmlbody

html, 
body {
    height: 100%;
}

また、同じ高さを2 divにする場合は、親要素のdisplay:flexプロパティを使用または設定します。

8
Michael Benjamin 2017-10-04 03:46.

デフォルトでは、ブロック要素は親の全幅を消費します。

これが、垂直に積み重ねるという設計要件を満たす方法です。

9.4.1ブロックフォーマットコンテキスト

ブロックフォーマットのコンテキストでは、ボックスは、含まれているブロックの上部から始めて、垂直方向に次々に配置されます。

ただし、この動作は高さまで拡張されません。

デフォルトでは、ほとんどの要素はコンテンツの高さです(height: auto)。

幅とは異なり、余分なスペースが必要な場合は高さを指定する必要があります。

したがって、次の2つの点に注意してください。

  • 全幅が必要な場合を除いて、ブロック要素の幅を定義する必要があります
  • コンテンツの高さが必要でない限り、要素の高さを定義する必要があります

.Contact {
  display: flex;     /* full width by default */
  min-height: 100vh; /* use full height of viewport, at a minimum */
}

.left {
  flex: 0 0 60%;
  background-color: tomato;
}

.right {
  flex: 1;
  background-color: pink;
}

body { margin: 0; } /* remove default margins */
<div class="Contact">
  <section class="left">
    <div class="">
      <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h1>
    </div>
  </section>
  <section class="right">
    <img />
  </section>
</div>

8
khalifeh 2018-03-10 14:52.

ビューポートの高さを意味する「px」の代わりに「vh」単位を使用するだけです。

height: 100vh;
7
newdark-it 2017-06-13 04:52.

これは、以前の回答とまったく同じではありませんが、一部の人には役立つ可能性があります。

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0px;
}

#one {
  background-color: red;
}

#two {
  margin-top: 0px;
  background-color: black;
  color: white;
  overflow-y: scroll;
}

https://jsfiddle.net/newdark/qyxkk558/10/

6
Stickers 2016-01-26 07:36.

オプションの1つは、CSSテーブルを使用することです。優れたブラウザサポートがあり、Internet Explorer8でも動作します。

JSFiddleの例

html, body {
  height: 100%;
  margin: 0;
}
.container {
  display: table;
  width: 100%;
  height: 100%;
}
.left, .right {
  display: table-cell;
  width: 50%;
}
.right {
  background: grey;
}
<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

6
Sunil Rajput 2019-12-04 01:21.

これを一度試してください...

*{
  padding:0;
  margin:0;
}
.parent_div{
  overflow:hidden;
  clear:both;
  color:#fff;
  text-align:center;
}

.left_div {
  float: left;
  height: 100vh;
  width: 50%;
  background-color: blue;

}

.right_div {
  float: right;
  height: 100vh;
  width: 50%;
  background-color: green;

}
<div class=" parent_div">
  <div class="left_div">Left</div>
  <div class="right_div">Right</div>
</div>

5
robross0606 2015-05-07 11:16.

FlexBoxCSSを使用する

Flexboxは、このタイプの問題に最適です。Flexboxは、コンテンツを水平方向にレイアウトすることで主に知られていますが、実際には垂直方向のレイアウトの問題でも同様に機能します。あなたがしなければならないのは、フレックスコンテナで垂直セクションをラップし、拡張したいものを選択することです。コンテナ内の利用可能なすべてのスペースを自動的に占有します。

5
Thuc Nguyen 2017-10-29 20:55.

あなたが使用することができますdisplay: flexし、height: 100vh

html, body {
  height: 100%;
  margin: 0px;
}
body {
  display: flex;
}

.left, .right {
  flex: 1;
}

.left {
  background: orange;
}

.right {
  background: cyan;
}
<div class="left">left</div>
<div class="right">right</div>

5
Prabhakar Undurthi 2015-10-17 00:28.

2つのことを行う必要があります。1つは、すでに行った高さを100%に設定することです。2番目は位置を絶対に設定します。それでうまくいくはずです。

html,
body {
  height: 100%;
  min-height: 100%;
  position: absolute;
}

ソース

5
ProblemChild 2017-04-18 19:56.

次のCSSを試してください。

html {
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body {
    height: 100%;
}

#right {
    min-height: 100%;
}
5
JimmyFlash 2018-08-23 00:48.

実際、私にとって最も効果的なのは、vhプロパティを使用することでした。

私のReactアプリケーションでは、サイズを変更した場合でもdivをページの高さに一致させたいと思っていました。、を試しましたがheight: 100%;overflow-y: auto;設定時にheight:(your percent)vh;意図したとおりに動作しませんでした。

注:パディングや丸い角などを使用している場合は、vhプロパティのパーセントからこれらの値を減算するようにしてください。そうしないと、高さが追加され、スクロールバーが表示されます。これが私のサンプルです:

.frame {
  background-color: rgb(33, 2, 211);
  height: 96vh;
  padding: 1% 3% 2% 3%;
  border: 1px solid rgb(212, 248, 203);
  border-radius: 10px;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 50px 100px minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr);
}
2
John Smith Optional 2013-09-12 23:41.

position: absolute;とjQueryを使用する場合は、

$("#mydiv").css("height", $(document).height() + "px");
2
RamNiwas Sharma 2018-05-01 01:02.

HTML

   // vw: hundredths of the viewport width.
   // vh: hundredths of the viewport height.
   // vmin: hundredths of whichever is smaller, the viewport width or height.
   // vmax: hundredths of whichever is larger, the viewport width or height.

<div class="wrapper">
    <div class="left">
        Left
    </div>
    <div class="right">
        Right
    </div>
</div>

CSS

<style>
    .wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        height: 100vh; // Height window (vh)
    }
    .wrapper .left{
        widht: 80%; // Width optional, but recommended
    }
    .wrapper .right{
        widht: 20%; // Width optional, but recommended
        background-color: #dd1f26;
    }
<style>

Related questions

MORE COOL STUFF

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは、夫に会ったとき、典型的な交際のアドバイスに逆らいました。

マイケルシーンが非営利の俳優である理由

マイケルシーンが非営利の俳優である理由

マイケルシーンは非営利の俳優ですが、それは正確にはどういう意味ですか?

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

特徴的なスターのコリン・エッグレスフィールドは、RomaDrama Liveでのスリル満点のファンとの出会いについて料理しました!加えて、大会での彼のINSPIREプログラム。

「たどりつけば」をオンラインでストリーミングできない理由

「たどりつけば」をオンラインでストリーミングできない理由

ノーザンエクスポージャーが90年代の最も人気のある番組の1つになった理由を確認するには、Blu-rayまたはDVDプレーヤーをほこりで払う必要があります。

バイオニック読書はあなたをより速く読むことができますか?

バイオニック読書はあなたをより速く読むことができますか?

BionicReadingアプリの人気が爆発的に高まっています。しかし、それは本当にあなたを速読術にすることができますか?

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖は、世界で2番目に大きいボイリング湖です。そこにたどり着くまでのトレッキングは大変で長いですが、努力する価値は十分にあります。

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

サロンからのヘアトリミングや個人的な寄付は、油流出を吸収して環境を保護するのに役立つマットとして再利用できます。

ホワイトハウスの最も記憶に残る結婚式を見てください

ホワイトハウスの最も記憶に残る結婚式を見てください

過去200年以上の間にホワイトハウスで結婚したのはほんの数人です。彼らは誰でしたか、そしてそこで結婚式を獲得するために何が必要ですか?

驚くほど素晴らしいDropMixミュージックミキシングカードゲームは30ドルで驚くべき取引です

驚くほど素晴らしいDropMixミュージックミキシングカードゲームは30ドルで驚くべき取引です

DropMixはNFC対応のカードゲームで、基本的にはリミックスアーティストになります。現在、Amazonでは$ 30まで下がっており、これまでで最高の価格に匹敵します。ロックバンドで有名なHarmonixによって開発されたDropMixは、おそらく少し野心的すぎるように思われます。結局のところ、ほとんどの人は素晴らしいリズムを持っていませんが、ゲームは驚くほどうまく実行されます。

メアリーJ.ブライジがついにハリウッドウォークオブフェイムスターを獲得

メアリーJ.ブライジがついにハリウッドウォークオブフェイムスターを獲得

写真:APメアリーJ.ブライジは、間もなくハリウッドウォークオブフェイムのスターを獲得します。これは、メアリーJよりもハリウッドウォークオブフェイムのほうが正直なところ恩恵です。

MeltdownとSpectreの脆弱性についてこれまでに知っていることはすべて、簡単な方法で説明されています

MeltdownとSpectreの脆弱性についてこれまでに知っていることはすべて、簡単な方法で説明されています

画像:グラズ工科大学/ NataschaEiblがデザインしたロゴ。MeltdownとSpectreは、攻撃者がシステムメモリに保存されているあらゆる種類の情報にアクセスできるようにする2つの脆弱性に付けられた名前です。

彼のニューヨークの家から追い出されようとしている97歳の第二次世界大戦の獣医。メリーエフィングクリスマス

彼のニューヨークの家から追い出されようとしている97歳の第二次世界大戦の獣医。メリーエフィングクリスマス

日本人に襲われたときに真珠湾にいた97歳の第二次世界大戦のベテランが、ニューヨークのブルックリンから追い出されています。

Zendaya Wishes Boyfriend Tom Holland Happy Birthday with Cuddly Photo: He 'Makes Me the Happiest'

Zendaya Wishes Boyfriend Tom Holland Happy Birthday with Cuddly Photo: He 'Makes Me the Happiest'

Zendaya shared a sweet photo in honor of boyfriend Tom Holland's 26th birthday Wednesday

小さな女性:脳卒中を患った後に病院から解放されたアトランタのジューシーな赤ちゃん:「まだ癒し」

小さな女性:脳卒中を患った後に病院から解放されたアトランタのジューシーな赤ちゃん:「まだ癒し」

シーレン「Ms.JuicyBaby」ピアソンは、先月脳卒中で入院した後、「もう一度たくさんのことをする方法を学ばなければならない」ため、言語療法を受けていることを明らかにしました。

エマストーンは彼女のクリフサイドマリブビーチハウスを420万ドルでリストアップしています—中を見てください!

エマストーンは彼女のクリフサイドマリブビーチハウスを420万ドルでリストアップしています—中を見てください!

オスカー受賞者の世紀半ばの家には、3つのベッドルーム、2つのバス、オーシャンフロントの景色があります。

ジーニー・メイ・ジェンキンスは、母乳育児の経験の中で、彼女は「本当に、本当に落ち込んでいる」と言います

ジーニー・メイ・ジェンキンスは、母乳育児の経験の中で、彼女は「本当に、本当に落ち込んでいる」と言います

ジーニー・メイ・ジェンキンスは、生後4か月の娘、モナコに母乳育児をしていると語った。

投資ノート:Bioscout AU$300万シード

投資ノート:Bioscout AU$300万シード

Bioscoutは、農家を運転席に置くという使命を負っています。Artesian(GrainInnovate)やUniseedと並んで、最新のシードラウンドでチームを支援できることをうれしく思います。問題真菌症による重大な作物の損失は、農民にとって試練であることが証明されています。

リトルマーケットリサーチ1| 2022年のクイックグリンプス遠隔医療市場

リトルマーケットリサーチ1| 2022年のクイックグリンプス遠隔医療市場

遠隔医療は、パンデミック後の時代では新しいものではなく、時代遅れの分野でもありません。しかし、業界を詳しく見ると、需要と供給の強力な持続可能性と、米国で絶え間ない革命となる強力な潜在的成長曲線を示しています。

スタートアップ資金調達環境:タイのスタートアップエコシステムの次は何ですか?

スタートアップ資金調達環境:タイのスタートアップエコシステムの次は何ですか?

2021年は、世界的なベンチャーキャピタル(VC)の資金調達にとって記録的な年でした。DealStreetAsiaによると、東南アジアも例外ではなく、この地域では年間で記録的な25の新しいユニコーンが採掘されました。

ムーアの法則を超えて

ムーアの法則を超えて

計算に対する私たちの欲求とムーアの法則が提供できるものとの間には、指数関数的に増大するギャップがあります。私たちの文明は計算に基づいています—建築と想像力の現在の限界を超える技術を見つけなければなりません。

Language