据我所知，我的aside元素和div.content应该占用div.container中可用空间的一半。另外，div.content中的网格应占用所有可用的垂直空间。
问题在于，网格项目无法占据任何高度（如果未进行硬编码）。另外，网格占用的所有垂直空间（由于grid-gap）均来自aside元素和div.content，这意味着div.content会窃取aside'的垂直空间，并且这两个元素的高度不再相同。
aside的高度等于div.content的高度减去网格的高度。
最后，禁止使用flexbox为div.content设置的高度。添加到div.content的子元素的行为更像其兄弟姐妹。
* {
box-sizing: border-box;
}
body {
min-height: 100%;
margin: 0;
display: flex;
flex-direction: column;
}
html {
height: 100%;
}
header,
footer {
background-color: #1A1C22;
height: 100px;
}
.container {
flex: 1 0 400px;
display: flex;
flex-direction: column;
padding-top: 12px;
}
aside {
background-color: #6C757D;
flex: 1 1 auto;
}
.content {
flex: 1 1 auto;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(6, 1fr);
grid-gap: 20px;
border: 2px solid blue;
}
section {
background-color: #343A40;
border: 1px solid red;
}<body>
<header></header>
<div class="container">
<aside></aside>
<div class="content">
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
</div>
</div>
<footer></footer>
</body>
答案 0 :(得分：0)
通过明确地指定# 1. {-}
given a potential of the type : $V(x\to-\infty)=V(x\to\infty)=0$ , we can assume the same wave function on both sides of the block .
$\longrightarrow k_1=k_2=\frac{\sqrt{2mE}}{\hbar}\longrightarrow\hspace{20pt}S = \begin{bmatrix} t & -\frac{t}{t^{\star}}r^{\star} \\ r & t \end{bmatrix}$
a matrix is unitary if it's conjugate is also inverse . meaning , $S\bullet S^{\star}=I$
in our case :
$\begin{bmatrix} t & -\frac{t}{t^{\star}}r^{\star} \\ r & t \end{bmatrix}\bullet\begin{bmatrix}t^{\star} & r^{\star} \\ -\frac{t^{\star}}{t}r & t^{\star}\end{bmatrix}=\begin{bmatrix}|r|^2+|t|^2&0\\0&|r|^2+|t|^{2}\end{bmatrix}=I$
hence , S is unitary .
# 2.A and 2.B {-}
given a particle with a delta potential function , the protocle of solution is known :
$\psi(x)=\left\{\begin{array}{l}A_{+}e^{ikx}+A_{-}e^{-ikx}\hspace{60pt}x<0\\B_{+}e^{ikx}+B_{-}e^{-ikx} \hspace{60pt}x>0\end{array}\right.\hspace{30pt}(k=\frac{\sqrt{2mE}}{\hbar})$
stiching the bounderies , considering the discontinuity of the derivative at point of diverging potential :
- $\psi^{'}(0_{+})-\psi^{'}(0_{-})=-\frac{2m\lambda}{\hbar^2}\psi(0)\hspace{10pt}\longrightarrow\hspace{10pt}B_{+}-B_{-}-A_{+}+A_{-}=-2\frac{\lambda}{i\hbar}\sqrt{\frac{m}{2E}}(A_{+}+A_{-})$
- $\psi(0_{+})=\psi(0_{-})\hspace{10pt}\longrightarrow\hspace{10pt}A_{+}+A_{-}=B_{+}+B_{-}$
under the restriction of generality, we can force the constants to match a scenario of a particle starting solely at $x=-\infty$ and obtain the coefficents of transmition and reflection :
$\begin{array}{l}A_{+}=1\\A_{-}=r_1 \\B_{-}=0\\ B_{+}=t_1 \end{array}\hspace{10pt}\longrightarrow\hspace{10pt}\begin{array}{l}r_1=-\frac{q}{1+q} \\ t_1 = \frac{1}{q+1}\end{array}\hspace{10pt}\text{denoting}\hspace{10pt}q=-i\frac{\lambda}{\hbar}\sqrt{\frac{m}{2E}}$
finally , using the formulas mentioned in class we obtain the scatter and transfer matrices :
$T=\begin{bmatrix} 1-q & -q\\ q & 1+q \end{bmatrix}\hspace{30pt}S=\begin{bmatrix} \frac{1}{q+1} & -\frac{q}{q+1}\\ -\frac{q}{q+1} & \frac{q}{1-q} \end{bmatrix}$
# 2.C {-}
we can obtain a solution in a striaght-forward manner by applying the same rules with two boundry points and double the equations.
rather , we can twich the former solution to fit a general delta function $\delta(x-a)$ and then multiply matrices in order to obtain the desired coefficent .
for the general case $\delta(x-a)$ we get the following wave functions :
$\psi(x)=\left\{\begin{array}{l}A_{+}e^{ikx}+A_{-}e^{-ikx}\hspace{60pt}x<a\\B_{+}e^{ikx}+B_{-}e^{-ikx} \hspace{60pt}x>a\end{array}\right.\hspace{30pt}(k=\frac{\sqrt{2mE}}{\hbar})$
- $\psi^{'}(a_{+})-\psi^{'}(a_{-})=-\frac{2m\lambda}{\hbar}\psi(a)\hspace{10pt}\longrightarrow\hspace{10pt}B_{+}e^{ika}-B_{-}e^{-ika}-A_{+}e^{ika}+A_{-}e^{-ika}=-2q(A_{+}e^{ika}+A_{-}e^{-ika})$
- $\psi(a_{+})=\psi(a_{-})\hspace{10pt}\longrightarrow\hspace{10pt}A_{+}e^{ika}+A_{-}e^{-ika}=B_{+}e^{ika}+B_{-}e^{-ika}$
and again forcing the scenario of a particle arriving solely from $x=-\infty$ we obtain the following general matrices:
$T=\begin{bmatrix} 1-q & -qe^{-2ika}\\ qe^{2ika} & 1+q \end{bmatrix}\hspace{30pt}S=\begin{bmatrix} \frac{1}{q+1} & -\frac{q}{q+1}e^{-2ika}\\ -\frac{q}{q+1}e^{2ika} & \frac{q}{1-q} \end{bmatrix}$
finally , the transmission coefficent of a particle arriving solely at $-\infty$ and passing two delta potentials will be the product of two T matrices for a and -a :
$\underset{\delta(x-a)}{\underbrace{\begin{bmatrix} 1-q & -qe^{-2ika}\\ qe^{2ika} & 1+q \end{bmatrix}}}\underset{\delta(x+a)}{\underbrace{\begin{bmatrix} 1-q & -qe^{2ika} \\ qe^{-2ika} & 1+q \end{bmatrix}}}=\underset{T_2}{\underbrace{\begin{bmatrix} ...& = \frac{1}{t_2} \\ ... & \overbrace{(1+q)^2-q^2e^{4ika}} \end{bmatrix}}}\hspace{10pt}\longrightarrow\hspace{10pt}t_2=\frac{1}{(1+q)^2-q^2e^{4ika}}$
# 3.A {-}
given a potential composed of a N identical delta potentials train , and given that the corrseponding transfer matrix obeys the following rule :
$T(k)\cdot\vec{V_{\pm}}=\lambda_{\pm}\vec{V_{\pm}}\hspace{10pt}\longrightarrow\hspace{10pt}T(k)\cdot\underset{=P}{\underbrace{\begin{pmatrix}|&|\\\vec{V_+}&\vec{V_-}\\|&|\end{pmatrix}}}=\begin{pmatrix}|&|\\\vec{V_+}&\vec{V_-}\\|&|\end{pmatrix}\cdot\underset{=\Lambda}{\underbrace{\begin{pmatrix} \lambda_+ &0\\ 0 & \lambda_- \end{pmatrix}}}\hspace{10pt}\longrightarrow\hspace{10pt}T(k)=P\cdot\Lambda\cdot P^{-1}$
as shown in class , we can treat the matrices as equal and ignore the phase accumalated since we are only interested in the transmission coefficent which is equal for all x . therefore :
$T_{tot}=T^N=\left(P\cdot\Lambda\cdot P^{-1}\right)^N=P\cdot\Lambda^N\cdot P^{-1}=P\cdot\Lambda^N\cdot P^T$
where the last equality was due to the orthogonality of the bases.
the vector of amplitudes $\vec{A}=\begin{pmatrix}A_{+}\\A_{-}\end{pmatrix}$ can be projected using the eigenvectors : $\vec{A}=C_{+}\vec{V_{+}}+C_{-}\vec{V_{-}}$
and finally we can write in matrix notation the equation describing a partice incident at N delta potentials :
$\vec{B}=T_{tot}\cdot\vec{A}=P\cdot\Lambda^N\cdot P^T\cdot\left(C_{+}\vec{V_{+}}+C_{-}\vec{V_{-}}\right)=\begin{pmatrix}|&|\\\vec{V_+}&\vec{V_-}\\|&|\end{pmatrix}\cdot\begin{pmatrix} \lambda^N_+ &0\\ 0 & \lambda^N_- \end{pmatrix}\cdot\begin{pmatrix}\leftarrow&\vec{V_+}&\rightarrow\\\leftarrow&\vec{V_-}&\rightarrow\end{pmatrix}\cdot\left(C_{+}\vec{V_{+}}+C_{-}\vec{V_{-}}\right)=C_{+}\lambda^N_+\vec{V_+}+C_{-}\lambda^N_-\vec{V_-}$
the transmission coefficent will just be the ratio of the refracted ampliture by the incident :
$t_{tot}=\frac{B_+}{A_+}\hspace{5pt}\text{,while forcing}\hspace{10pt}B_-=0\hspace{10pt}\longrightarrow\hspace{10pt}t_{tot}=\cfrac{C_-\lambda^N_-(v_-^{(1)}v_+^{(2)}-v_-^{(2)}v_+^{(1)})}{v_{+}^{(2)}(C_+v_+^{(1)}+C_-v^{(1)}_-)}\underset{\text{after simplification}}{=}\cfrac{C_-\lambda^N_-v_-^{(1)}}{v_{+}^{(2)^2}(C_+v_+^{(1)}+C_-v^{(1)}_-)}$
# 3.B {-}
manually performing the multiplication , we obtain the matrix T(k):
$T(k)=\begin{pmatrix}\lambda_+v_+^{(1)^2}+\lambda_-v_-^{(1)^2}&\lambda_+v_+^{(2)}+\lambda_-v_-^{(1)}\\\lambda_+v_+^{(1)}v_+^{(2)}+\lambda_-v_-^{(1)}v_-^{(2)}&\lambda_+v_+^{(2)^2}+\lambda_-v_-^{(2)^2}\end{pmatrix}\hspace{10pt}\longrightarrow\hspace{10pt}tr(T)=\lambda_++\lambda_-\hspace{15pt} \text{and}\hspace{15pt}det(T)=\lambda_+\lambda_-$
- let's assume $tr(T)\le 2$. we also know that det(T)=1 . for these two equations to hold , $\lambda_-$ must equal 1.
in that case it is clear that $t_{tot}>0$.
- let's assume $tr(T)>2$ . applying the same logic as before we conclude that $\lambda_-$ can take any value but 1 . especially $\lambda_-$ can be smaller then 1 , but in that case we obtain:
$\underset{N>>1}{\lim}t_{tot}=\cfrac{C_-v_-^{(1)}}{v_{+}^{(2)^2}(C_+v_+^{(1)}+C_-v^{(1)}_-)}\cdot\underset{\text{smaller then 1}}{\underbrace{\lambda^N_-}}\to 0$
we can ultimately conclude that t>0 if and only if tr(T)$\le$2.
而不是height，并将flex-basis设置为{{1 }}。对于flex: 1 0 auto和.container，也用flex: 1代替flex: 1 1 auto（设置content代替 auto ）-请参见下面的演示和fiddle：
asideflex-basis: 0
上述解决方案几乎没有问题：
并不是很直观，因此对于列flexboxes 指定了正确的行为高度，
请注意，* {
box-sizing: border-box;
}
body {
min-height: 100%;
margin: 0;
display: flex;
flex-direction: column;
}
html {
height: 100%;
}
header,
footer {
background-color: #1A1C22;
height: 100px;
}
.container {
/* flex: 1 0 400px; */
display: flex;
flex-direction: column;
padding-top: 12px;
height: 400px; /* added */
flex: 1 0 auto; /* added */
}
aside {
background-color: #6C757D;
flex: 1; /* changed */
}
.content {
flex: 1; /* changed */
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(6, 1fr);
grid-gap: 20px;
border: 2px solid blue;
}
section {
background-color: #343A40;
border: 1px solid red;
}和<header></header>
<div class="container">
<aside></aside>
<div class="content">
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
</div>
</div>
<footer></footer>之间仍然存在4px的高度差，这显然是内容的2px边框。
网格布局可以轻松解决这些问题-柔性箱的价格和一维解决方案一样好，但在某些布局中达不到要求。在这里，我将删除aside包装器，并使用4行布局（content）：
containergrid-template-rows: 100px minmax(200px, 1fr) minmax(200px, 1fr) 100px;